onclick अगर तत्व डोम में पुनः लगाए मध्य क्लिक

Question

मैं एक साधारण पॉपअप प्रबंधक, जो डोम इस्तेमाल किया तय करने के लिए जो पॉपअप सामने होना चाहिए बनाया है, किसी भी z- सूचकांक नियम के बिना फायरिंग नहीं: जब मैं एक पॉपअप पर क्लिक करें, यह पहली स्थिति में स्थानांतरित हो गया, इसलिए यह अन्य पॉपअप के शीर्ष पर है। दुर्भाग्य से: यह डोम आंदोलन मेरे पॉपअप में ऑनक्लिक घटना को तोड़ देता है।

मैंने इस मुद्दे का एक साधारण मामला बनाया: निम्नलिखित कोड को तीन क्लिक ईवेंट आउटपुट करना चाहिए: mousedown, mouseup और क्लिक करें, यह फ़ायरफ़ॉक्स पर काम करता है, और मुझे लगता है कि यह क्रोम के पिछले संस्करणों में काम करता था, लेकिन यह नहीं करता अब और नहीं

<div> 
 
    <div onmousedown="console.log('mousedown');this.parentElement.appendChild(this);" onmouseup="console.log('mouseup');" onclick="console.log('click');">Click</div> 
 
</div>

आप जानते हैं कि कैसे मैं इस समस्या को हल कर सकते हैं, और मेरी ऑनक्लिक ईवेंट वापस मिल सकता है?

Answer 1

डोम में एक तत्व पुन: लगाने फायरिंग से अपने click घटना बंद हो जाता है, तो दूसरा विकल्प अपने भाई बहन को स्थानांतरित करने के लिए होगा।

function moveToFront(el) { 
 
    var parent = el.parentElement; 
 

 
    while (el.nextSibling) { 
 
    parent.insertBefore(el.nextSibling, el); 
 
    } 
 
} 
 

 
[].slice.call(document.getElementsByClassName('moveable')).forEach(function(el) { 
 
    el.addEventListener('mousedown', function() { 
 
    console.log('mousedown', this.id); 
 
    moveToFront(this); 
 
    }); 
 
    el.addEventListener('mouseup', function() { 
 
    console.log('mouseup', this.id); 
 
    }); 
 
    el.addEventListener('click', function() { 
 
    console.log('click', this.id); 
 
    }); 
 
});

.moveable { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
} 
 

 
#div1 { 
 
    background-color: green; 
 
    top: 10px; 
 
    left: 10px; 
 
} 
 

 
#div2 { 
 
    background-color: red; 
 
    top: 40px; 
 
    left: 40px; 
 
} 
 

 
#div3 { 
 
    background-color: yellow; 
 
    top: 20px; 
 
    left: 70px; 
 
}

<div> 
 
    <div id="div1" class="moveable">Click</div> 
 
    <div id="div2" class="moveable">Click</div> 
 
    <div id="div3" class="moveable">Click</div> 
 
</div>

:

यह काम करने के लिए (मैं पूरे पृष्ठ मोड में देखने की अनुशंसा क्योंकि सांत्वना उत्पादन घटनाओं को बाधित करता है अगर यह एक div तुम सिर्फ क्लिक किया है को शामिल किया गया) लगता है

Answer 2

यह है कि घटना फायरिंग बंद हो जाता है नहीं है, यह सिर्फ है कि आप घटना के साथ divs अब और क्लिक नहीं कर रहे है।

zIndexing पर सावधान रहें क्योंकि zindex रिश्तेदार को यह कंटेनर है। की तुलना में यह माता-पिता या आप इसके पीछे ले जाएगा आपको कम zindex के साथ एक कंटेनर नहीं हो सकता। "गंदे" समाधान zindex हर क्लिक के साथ बढ़ती है:

क्रोम पर

<style type="text/css"> 
html, body{ 
    width: 100%; 
    height: 100%; 
} 

.Movable{ 
    height: 100px; 
    position: absolute; 
    width: 100px; 
} 

.black{ 
    background-color: black; 
} 

.gray{ 
    background-color: gray; 
} 

.wheat{ 
    background-color: lightgray; 
} 

<div style="position: relative; z-index: 20;"> 
    <p id="log" style="height: 1em; overflow-y: scroll;"></p> 
    <div onclick="log('clicked', this)" onmousedown="log('mousedown', this)" onmouseup="log('mouseup', this)" class="Movable black"></div> 
    <div onclick="log('clicked', this)" onmousedown="log('mousedown', this)" onmouseup="log('mouseup', this)" style="left: 25px; top: 55px;" class="Movable gray"></div> 
    <div onclick="log('clicked', this)" onmousedown="log('mousedown', this)" onmouseup="log('mouseup', this)" style="left: 55px; top: 75px;" class="Movable wheat"></div> 
</div> 
<script type="text/javascript"> 
    var index = 1; 
    function log(msg, element) 
    { 
     element.style.zIndex = index++; 
     document.getElementById('log').innerHTML += "Log: " + msg + " -> " + element.className + "</br>"; 
    } 
</script>