我有一个复选框,我想对单击事件执行一些 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="https://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;
代替
和
event.stopPropagation();
event.stopPropagation()
停止将事件冒泡到父元素,防止任何父处理程序收到事件通知。
event.preventDefault()
阻止浏览器执行默认操作。使用方法 isDefaultPrevented 了解是否曾调用过此方法(在该事件对象上)。