處理內部 div 和外部 div 上的點擊事件處理程序

Question

我有模態 window：父div （具有深色透明背景的包裝器）和子div （帶有按鈕、輸入和文本）。 兩者都是固定定位。
在 JavaScript 我做簡單的代碼：如果我點擊父固定 div（.modal-wrapper） - 它必須關閉（刪除）整個模態 window。 如果我單擊關閉按鈕（模式窗口角落的“X”按鈕），結果相同。

這是我的簡單 JS 代碼：

function doModalClose() {
   modalWrapper.remove();
}

closeBtn.addEventListener('click', doModalClose);
modalWrapper.addEventListener('click', doModalClose);

和 html 標記：

<div class="modal-wrapper">
    <div class="modal-window">
        <div class="btn-wrapper"><span class="close-btn"></span></div>
        other modal elements...
    </div>
</div>

主要問題是，當我點擊父div時，它可以正常工作，就像我點擊.close-btn時一樣。 但是如果我點擊子div (.modal-window) 它也會關閉整個模式，這是不正確的！

我做了一個簡單的alert(); 檢查：當我單擊父級時，它應該說Modal Wrapper ，當我單擊子級時，它應該說Modal Window 。
當我點擊子 window 時，它會調用兩個alert(); 功能：首先是孩子的Modal Window ，然后是父母的Modal Wrapper 。
所以這就是我的問題的原因，但我不明白這種行為的原因。 我在子 div z-index: 2;上使用和z-index: 1; 在父 div 上，但它仍然沒有幫助。

感謝您的關注！

Answer 1

發生這種情況是因為一個在另一個內部，如果單擊內部 div，您也會單擊外部 div，因為內部在外部內部。 您需要一個額外的處理程序，僅用於.modal-window並使用event.stopPropagation() 。 運行此代碼段並自行查看。

 function doModalClose() { modalWrapper.remove(); } var closeBtn = document.getElementsByClassName('close-btn')[0] var modalWrapper = document.getElementsByClassName('modal-wrapper')[0] var modalWindow = document.getElementsByClassName('modal-window')[0] var button1 = document.getElementsByClassName('button1')[0] var button2 = document.getElementsByClassName('button2')[0] closeBtn.addEventListener('click', doModalClose); modalWrapper.addEventListener('click', doModalClose); modalWindow.addEventListener('click', function (event) { event.stopPropagation() }) button1.addEventListener('click', function (event) { alert('button1') }) button2.addEventListener('click', function (event) { alert('button2') })

 div {margin: 5px; padding: 5px}.modal-wrapper {border: 2px solid red}.modal-window {border: 2px solid blue}.btn-wrapper, .btn {border: 2px solid green}

 <div class="modal-wrapper">modal-wrapper <div class="modal-window">modal-window <div class="btn-wrapper"><span class="close-btn">button</span></div> <a class="btn button1">Button1</a> <a class="btn button2">Button2</a> </div> </div>