Question

单击特定元素时，我想调用一个函数。当点击任何一个孩子时，我不想要调用该功能。

我不使用jQuery。

示例：

我创建了一个模态：

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

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

的jsfiddle：

https://jsfiddle.net/5kuwmf9s/

研究

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

Theres另一个answer建议将事件处理程序附加到捕获事件并停止传播的所有子项 - 这似乎是不必要的。我的孩子很有活力，继续操作处理程序会很复杂。

Answer 1

您可能已对事件target和currentTarget

进行了比较

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

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

参考文献：

Answer 2