点击孩子时没有onclick

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"上有一个jQuery onclick事件但是,当我点击附件时,我不希望调用".outerElement"onclick事件,是否有某种方法可以防止这种情况或检查哪个元素被点击？

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 );
});

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
});