点击孩子时没有点击

Question

我有以下 html 代码：

 <div class="outerElement">
    <div class="text">
     Lorem ipsum dolar sit amet
    </div>
    <div class="attachment">
      <!-- Image from youtube video here -->
    </div>
</div>

我在 .outerElement 但是，我不希望 .outerElement onclick 事件在我单击附件时被调用，有什么方法可以防止这种情况或检查哪个元素被点击？

原文由 xorinzor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在子元素上使用 event.stopPropagation() 。

 $(".attachment").on("click", function(event){
  event.stopPropagation();
  console.log( "I was clicked, but my parent will not be." );
});

这可以防止事件将 DOM 向上冒泡到父节点。

event 对象的一部分是 target 成员。这将告诉您哪个元素触发了事件。但是，在这种情况下， stopPropagation 似乎是最佳解决方案。

 $(".outerElement").on("click", function(event){
  console.log( event.target );
});

原文由 Sampson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我不确定允许从子元素传播的性能影响是什么，但我通过比较 event.target 和 event.currentTarget 解决了这个问题：

 onClick={(event) => {
  if (event.target === event.currentTarget) {
     console.log('Handle click');
  }
}}

这是 React ^ 更通用的 javascript 代码是：

 $('.outerElement').click(function(event) {
  if (event.currentTarget !== event.target) {
    return;
  }
  // Handle event
});

---

您还可以像这样过滤掉特定的元素类型：

 $('.outerElement').click(function(event) {
  if (['input', 'select', 'option'].indexOf(event.target.localName) >= 0) {
    return;
  }
  // Handle event
});

原文由 Conrad S 发布，翻译遵循 CC BY-SA 4.0 许可协议