onclick không kích hoạt nếu phần tử được gắn lại vào giữa DOM

Question

Tôi đã thực hiện một trình quản lý cửa sổ bật lên đơn giản, sử dụng dom để quyết định cửa sổ bật lên nào ở phía trước mà không có bất kỳ quy tắc z-index nào: khi tôi nhấp vào cửa sổ bật lên di chuyển ở vị trí đầu tiên, do đó, nó là trên đầu trang của popup khác. Thật không may: phong trào dom này phá vỡ sự kiện onclick trong popup của tôi.

Tôi đã tạo ra một sự cố đơn giản: mã sau sẽ xuất ra ba sự kiện nhấp chuột: mousedown, mouseup và nhấp, nó hoạt động trên Firefox và tôi nghĩ nó được sử dụng để làm việc trong các phiên bản trước của Chrome, nhưng không không còn nữa.

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

Bạn có biết làm thế nào tôi có thể khắc phục vấn đề này, và trở lại sự kiện onclick của tôi?

Answer 1

Nếu việc chèn lại một phần tử vào DOM sẽ dừng sự kiện click khi kích hoạt, thì tùy chọn khác sẽ là di chuyển anh chị em của nó.

Điều này dường như làm việc (tôi khuyên bạn nên xem trong chế độ trang đầy đủ vì giao diện điều khiển đầu ra sẽ làm gián đoạn sự kiện nếu nó bao gồm một div bạn vừa nhấp):

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

Nó không phải là sự kiện ngừng bắn, nó chỉ là bạn không nhấp vào divs với sự kiện nữa.

Hãy cẩn thận với zIndexing vì zIndex có liên quan đến vùng chứa của nó. Bạn không thể có một vùng chứa có ít zIndex hơn là cha mẹ hoặc bạn sẽ di chuyển nó phía sau nó. Các "bẩn" giải pháp là phải có ZIndex phát triển với mỗi nhấp chuột:

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