停止传播事件侦听器点击，但仍允许元素内发生其他点击事件

Question

我创建了一个相当经典的模态框。修复了屏幕中间的模态。半透明背景，中间有一个方框。

该框包含一些点击事件侦听器（例如关闭 X 和执行其他操作的按钮）。

我想允许用户通过单击外部背景来关闭模式。

HTML 例子

<div class="modal">
    <div class="modal__inner">
        <div class="modal_closebtn">X</div>
    </div>
</div>

目前，我有以下方法来处理基于点击 .modal 关闭模式，它覆盖了整个屏幕。

document.querySelector(".modal").addEventListener("click", () => {
    this.toggleModal();
});

我的问题是，如果您也在 .modal__inner 内部单击，则会触发此事件。

所以我尝试将 eventListener 添加到 stopPropagation()

document.querySelector(".modal__inner").addEventListener("click", e => {
    e.stopPropagation();
});

这现在阻止了我的 .modal_closebtn 和模态内发生的任何其他事件的 eventListener。

如何确保点击背景 div 仅适用于 modal div 而不是 modal__inner 或任何其他？不幸的是，当我在 div 内部点击后查看 e.currentTarget 时，它 returns .modal 而不是 .modal__inner，尽管看起来我确实在 div 内部点击了.

非jQuery解决方案请

Answer 1

事件对象具有事件的原始 target，使用它来确定事件的来源。

var modal = document.querySelector(".modal");
modal.addEventListener("click", (e) => {
    if (e.target !== modal) return;
    this.toggleModal();
});

Answer 2

为了避免 querySelector 执行太多次并获得一点性能，将结果存储到一个变量中。

var elem = document.querySelector(".modal")
elem.addEventListener("click", (e) => {
  if (e.target !== elem) return;
  console.log('toggle!');
  //this.toggleModal();
});

.modal {
  width: 300px
  height: 300px;
  border: 1px solid #000
}

.modal__inner {
  width: 100px
  height: 100px;
  border: 1px solid red
}

<div id="hola" class="modal">
  Parent modal
  <br>
  <br>
 
  <br>
  <div id="epale" class="modal__inner">
    Inner modal
    <div class="modal_closebtn">X</div>
  </div>
</div>

编码愉快！

停止传播事件侦听器点击，但仍允许元素内发生其他点击事件

Stop propogation of event listener click but still allow other click events to occur within the element

javascript

stoppropagation

HTML 例子