如何停止复选框上的事件冒泡

Question

我有一个复选框，我想对click事件执行一些Ajax操作，但是该复选框也位于容器中，它具有自己的单击行为，当单击该复选框时，我不想运行该行为。此示例说明了我要执行的操作：$(document).ready(function() {  $('#container').addClass('hidden');  $('#header').click(function() {    if ($('#container').hasClass('hidden')) {      $('#container').removeClass('hidden');    } else {      $('#container').addClass('hidden');    }  });  $('#header input[type=checkbox]').click(function(event) {    // Do something  });});#container.hidden #body {  display: none;}<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><div id="container">  <div id="header">    <h1>Title</h1>    <input type="checkbox" name="test" />  </div>  <div id="body">    <p>Some content</p>  </div></div>但是，我不知道如何在不导致默认点击行为（复选框变为选中/取消选中）的情况下停止事件冒泡。以下两项都停止了事件冒泡，但也没有更改复选框状态：event.preventDefault();return false;

Answer 1

更换

event.preventDefault();

return false;

与

event.stopPropagation();

event.stopPropagation（）

停止将事件冒泡到父元素，从而防止任何父处理程序收到该事件的通知。

event.preventDefault（）

阻止浏览器执行默认操作。使用isDefaultPrevented方法可以知道是否曾经（在该事件对象上）调用过此方法。

Answer 2

使用stopPropagation方法：

event.stopPropagation();

Answer 3

别忘了IE：

if (event.stopPropagation) {    // standard

        event.stopPropagation();

    } else {    // IE6-8

        event.cancelBubble = true;

}

Answer 4

使用jQuery时，您无需单独调用stop函数。

您可以只返回false事件处理程序

这将停止事件并取消冒泡。

另请参阅event.preventDefault（）与return false

从jQuery文档中：

因此，这些处理程序可能会通过调用event.stopPropagation()或return 阻止委托处理程序触发false。