要素がDOMの中クリックに再挿入された場合、onclickは起動しません

Question

domを使用してポップアップを前に置く単純なポップアップマネージャを作成しました。ポップアップをクリックすると最初の位置に移動したので、他のポップアップの上に表示されます。残念ながら、このDOMの動きはポップアップでonclickイベントを破ります。

次のコードでは、mousedown、mouseup、clickという3つのクリックイベントが出力されるはずですが、これはFirefoxで動作し、以前のバージョンのChromeでも動作していたと思いますが、もう駄目だ。

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

私はこの問題を解決する方法を知っている、と私のonclickイベントを取り戻すのですか？

Answer 1

DOMに要素を再挿入すると、そのclickイベントが発生しなくなる場合、もう1つのオプションは兄弟を移動することです。

これは（それはあなただけクリックしたdiv要素をカバーする場合、コンソール出力がイベントを中断しますので、私はフルページモードでの表示をお勧めします）動作するようです：

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>

Answer 2

イベントが発砲を停止するわけではありません。イベントでdivをクリックしていないだけです。

zIndexはコンテナを基準にしているため、zIndexingには注意してください。親よりも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>