如何停止点击checkbox上的事件冒泡

我有一个checkbox,我想对点击事件执行一些Ajax操作,但是checkbox也在一个容器内,它有自己的点击行为,我不想在单击checkbox时运行。 这个例子说明了我想要做的事情:

<html lang="en"> <head> <title>Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(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 }); }); </script> <style type="text/css"> #container.hidden #body { display:none; } </style> </head> <body> <div id="container"> <div id="header"> <h1>Title</h1> <input type="checkbox" name="test" /> </div> <div id="body"> <p>Some content</p> </div> </div> </body> </html> 

但是,我不知道如何停止事件冒泡而不会导致默认的点击行为(checkbox变成checked / unchecked)不能运行。

以下两项都会停止事件冒泡,但也不会更改checkbox状态:

 event.preventDefault(); return false; 

更换

 event.preventDefault(); return false; 

 event.stopPropagation(); 

event.stopPropagation()

停止事件冒泡到父元素,阻止任何父处理程序被通知事件。

event.preventDefault()

阻止浏览器执行默认操作。 使用方法isDefaultPrevented来知道这个方法是否曾被调用(在该事件对象上)。

使用stopPropagation方法:

 event.stopPropagation(); 

不要忘记IE:

 if (event.stopPropagation) { // standard event.stopPropagation(); } else { // IE6-8 event.cancelBubble = true; } 

正如其他人所说,尝试stopPropagation()

还有第二个处理程序尝试: event.cancelBubble = true; 这是一个IE特定的处理程序,但它至less支持FF。 对此我并不十分了解,因为我自己并没有使用它,但是如果一切都失败了,可能值得一试。

当使用jQuery时,你不需要单独调用一个停止函数。

你可以在事件处理程序中return false

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

另请参阅:

event.preventDefault()与返回false

从jQuery文档:

因此,这些处理程序可以通过调用event.stopPropagation()或返回false来防止委托处理程序触发。

这是理解事件冒泡概念的一个很好的例子。 根据上面的答案,最终的代码将如下所述。 在用户点击checkbox的情况下,使用event.stopPropagation();将停止事件传播到其父元素“标题” event.stopPropagation();

 $(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) { if (event.stopPropagation) { // standard event.stopPropagation(); } else { // IE6-8 event.cancelBubble = true; } }); }); 

感谢@mehras的代码。 我只是创build了一个片段来演示它,因为我认为这将是值得赞赏的,我想借口尝试该function。

 $(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) { if (event.stopPropagation) { // standard event.stopPropagation(); } else { // IE6-8 event.cancelBubble = true; } }); }); 
 div { text-align: center; padding: 2em; font-size:1.2em } .hidden { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="header"><input type="checkbox"/>Checkbox won't bubble the event, but this text will.</div> <div id="container">click() bubbled up!</div> 

在angularjs这应该工作:

 event.preventDefault(); event.stopPropagation();