我有一个复选框,希望对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;
更换
与
event.stopPropagation();
event.stopPropagation()
停止将事件冒泡到父元素,从而防止任何父处理程序收到该事件的通知。
event.preventDefault()
阻止浏览器执行默认操作。使用isDefaultPrevented方法可以知道是否曾经(在该事件对象上)调用过此方法。