javascript - 单击孩子时没有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>

而且我有一个 jQuery onclick 事件，.outerElement但是，我不希望在.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对象的一部分也是targetmember。这将告诉您从哪个元素触发事件开始。但是，在这种情况下，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
});

Answer 3

这在没有 jQuery 的情况下有效

<div class="outerElement">
    <div class="attachment">Hello</div>
</div>

<script type="text/javascript">
document.getElementsByClassName('outerElement').onclick = function(){

    alert('You clicked on parent');

}
document.getElementsByClassName('attachment').onclick = function(){

    event.stopPropagation();
    alert('You clicked on child');

}
</script>

Answer 4

简单地设置onclick="event.stopPropagation();"在孩子身上就可以了。

Answer 5

我不确定您是否可以在attachment单击项目时阻止事件触发，但您当然可以对其进行过滤

$('.outerElement').click(function() {
  if ($(this).hasClass('attachment')) {
    return;
  }
  // Handle event
});