如何停止点击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();
