停止点击传播给父母

Question

单击特定元素时，我想调用一个函数。 当任何儿童被点击，我不想调用的函数。

我没有使用jQuery。

例：

我创建了一个模式：

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

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

jsfiddle：

https://jsfiddle.net/5kuwmf9s/

研究：

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

还有另一个答案建议将事件处理程序附加到所有捕获其事件并停止传播的子级，这似乎是不必要的。 我的孩子们是充满活力的，要保持附加处理程序会变得很复杂。

Answer 1

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

仅当当前元素是事件的原始来源时，它们才相等：

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

参考文献：

JSFiddle： https ：//jsfiddle.net/u78k4k6t/

Answer 2