요소가 DOM 중간 클릭으로 다시 삽입 된 경우 onclick이 실행되지 않음

Question

DOM을 사용하여 어떤 팝업이 앞에 있어야하는지 결정하기 위해 DOM을 사용하는 간단한 팝업 관리자를 만들었습니다. 팝업을 클릭하면 첫 번째 위치로 이동 했으므로 다른 팝업 상단에 있습니다. 불행히도이 DOM 이동은 내 팝업에서 onclick 이벤트를 중단시킵니다.

다음과 같은 코드가 mousedown, mouseup 및 click이라는 세 번의 클릭 이벤트를 출력해야하며 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 이벤트가 중지되고 다른 옵션은 해당 형제를 이동하는 것입니다.

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가 적은 컨테이너를 가질 수 없으며, 그렇지 않으면 컨테이너 뒤에서 이동할 것입니다. 은 "더러운"솔루션은 Z- 색인 모든 클릭으로 성장하는 것입니다 : 크롬에

<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>