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 member。这将告诉您哪个元素触发了事件开始。但是，在这种情况下，stopPropagation似乎是最佳解决方案。

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

Answer 2

这没有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 3

我不是允许从子元素传播的性能含义，但是我通过比较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 4

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

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

Answer 5

只需在孩子身上设置onclick="event.stopPropagation();"即可。

点击孩子时没有onclick

5 个答案: