4

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

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

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

非常感谢！

4

4 回答 4

2

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

$('#child1').unbind('click');
于 2012-09-05T09:31:25.437 回答
2

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

演示： 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

于 2012-09-05T12:44:01.503 回答
2

您可以将其传递click给父母吗？

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

当您点击 .child1 时，它将阻止默认操作，然后触发对child1id 为 #parent 的父级的点击。

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

我创建了一个jsfiddle，展示了虽然child1它绑定了一个 click 函数，但它被忽略了，所以父点击只是被拾取。

于 2012-09-05T09:35:25.520 回答
1

你的意思是：

$('#parent').on('click', function(e) { 
   if( e.target !== this ) {
       return;
   }
});
于 2012-09-05T09:31:28.367 回答