javascript - 停止点击传播给 parent

Question

单击特定元素时，我想调用一个函数。单击它的任何子项时，我不想调用该函数。

我不使用 jQuery。

示例:

我创建了一个模式:

<div class="fullscreen-overlay">
  <div class="card">
    ...
  </div>
</div>

我想在单击“.fullscreen-overlay”时调用我的 closeModal() 函数，但在单击“.card”或其任何内容时不调用。

jsfiddle:

https://jsfiddle.net/5kuwmf9s/

研究:

我可以发誓这有一个 CSS 属性，但是在谷歌搜索并在 SO 上搜索它之后，我找不到它/可能一直在想象它。 “指针事件”在目标元素上停止它，而不是冒泡。

还有一个answer这建议将事件处理程序附加到所有捕获事件并停止传播的子级 - 这似乎是不必要的。我的 child 是动态的，继续附加处理程序会变得复杂。

Answer 1

您可能已经比较了事件的 target 和 currentTarget

只有当当前元素是事件的初始源时，它们才相等:

function handleClick(e){
  if (e.target === e.currentTarget) {
    alert('clicked!');
  }
}

引用资料:

• > https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
• > https://developer.mozilla.org/en-US/docs/Web/API/Event/target

JSFiddle:https://jsfiddle.net/u78k4k6t/