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

Question

我想知道如何在仍然触发父元素的onclick事件的情况下停止子元素的onclick事件。例如以下结构：

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

如果我比如点击了 "child1"，那么 "child1" 的 onclick 事件不会被触发，但是 "parent" 的 onclick 事件仍然会被触发。

非常感谢！

- NoOne

---

每次点击都是这样的吗，还是有特殊情况？ - keyser

如果你不需要它们，为什么要创建子元素的onclick事件呢？ - Zoltan Toth

我实际上想要它们，但有一些情况下我想暂时禁用它们。 - NoOne

也许你可以更具体地说明一下...它可以非常简单，只需要设置一个标志，让子事件处理程序来检测该标志即可。 - Felix Kling

Answer 1

最简单的方法是解除子元素的事件处理程序绑定。

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

- Fenton

Answer 2

你可以将 click 事件传递给父级元素吗？

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

当你点击.child1时，它将阻止默认操作，然后触发具有id为#parent的父元素的单击事件。

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

我创建了一个 jsfiddle，展示了尽管child1绑定了一个点击函数，但它被忽略了，所以只有父元素的点击被捕获。

- Alexander Wigmore

---

事件将自动冒泡，因此您不必明确触发父处理程序，在这种情况下，它甚至可能会触发处理程序两次。 - Felix Kling

谢谢！这正是我需要的！我按照Felix说的，删除了最后一个命令来触发父级，结果运行得很好！ - NoOne

实际上您的示例是不正确的。有两点：(a)event.preventDefault()只能防止默认操作，但单击div没有默认操作。 (b) event.stopPropagation() 阻止事件冒泡，因此在您的fiddle中，应调用子事件处理程序，而不是父事件处理程序。 但它没有，因为在子事件处理程序中，您有一个错误：e.stopPropagation() 应该是 event.stopPropagation()。 因此，您的解决方案提供了所需的结果，因为您的代码中有一个错误;) - Felix Kling

@NoOne：我不敢相信它能工作，因为event.preventDefault()和event.stopPropagation()都不是你在这里需要的。而且无论如何，这将是一个永久性的解决方案，但据我所了解，你想在运行时禁用子事件处理程序。如果您提供更多信息，我们可以更好地帮助您。 - Felix Kling

现在你的描述不再适用于你的fiddle了。子事件处理程序被执行，但父处理程序没有被执行。 - Felix Kling

为什么要绑定事件到子元素呢？ - Fenton

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

Demo: http://codebins.com/bin/4ldqp7l

- gaurang171

Answer 4

您的意思是：

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

- Sudhir Bastakoti

---

.target 将始终是您绑定到的元素，而 .currentTarget 则是当前事件目标。 - timidboy

哇！抱歉，我有点困惑。 - timidboy