Question

我想知道如何在触发父onclick事件的同时停止子onclick事件。例如以下结构：

<div id="parent">
   <div id="child1"></div>
   <div id="child2"></div>
   <div id="child3"></div>
</div>

如果单击“child1”，则不会触发“child1”的onclick事件，但仍会触发“parent”的onclick事件。

非常感谢！

Answer 1

最简单的方法是取消绑定孩子的事件处理程序。

$('#child1').unbind('click');

Answer 2

你可以将click传递给父母吗？

$('.child1').click(function(e){
    e.preventDefault();
    $(this).parent('#parent').trigger('click');
});

单击.child1时，将阻止默认操作，然后触发id为#parent的child1父项的单击。

实际上 - 可能忽略了上述内容 - 根据下面的评论，它可能会导致冒泡。您真正需要做的就是使用e.stopPropagation();。

我创建了一个jsfiddle，显示了虽然child1绑定了一个点击功能，但它被忽略了，因此父点击只会被选中。

Answer 3

这是上述问题的解决方案箱。请查看演示链接一次。

演示： http://codebins.com/bin/4ldqp7l

<强> HTML

<div id="parent">
  <div id="child1">
    Child-1
  </div>
  <div id="child2">
    Child-2
  </div>
  <div id="child3">
    Child-3
  </div>
</div>

<强>的jQuery

$(function() {
    $("#parent").click(function() {
        alert("Parent has been clicked too...!");
    });
    $("#child1").click(function(e) {
        e.stopPropagation();
        alert("Child-1 has been clicked...!");
    });
    $("#child2").click(function() {
        alert("Child-2 has been clicked...!");
    });
    $("#child3").click(function() {
        alert("Child-3 has been clicked...!");
    });
});

<强> CSS

#parent{
  padding:5px;
  background:#a34477;
  width:140px;
  text-align:center;
  padding:10px;
}

#parent div{
  border:1px solid #2211a4;
  background:#a3a5dc;
  width:100px;
  text-align:center;
  font-size:14px;
  margin-left:10px;
  margin-top:3px;
}

演示： http://codebins.com/bin/4ldqp7l

Answer 4

你的意思是：

$('#parent').on('click', function(e) { 
   if( e.target !== this ) {
       return;
   }
});

JQuery：如何在仍触发父onclick事件的同时停止子onclick事件

4 个答案: