jquery的事件冒泡是这样的,子节点的操作会触发父节点相应的操作,比如父节点定义了一个click的function,如果子节点被click了,就会触发父节点的的click的function,无论子节点是否定义了click的function的click事件都会触发这样一个冒泡,也就是向上传递的行为,如果需要阻止这样的冒泡操作,希望只是完成子节点该完成的操作,需要在子节点里面增加stopPropagation()
函数。这个函数和preventDefault()
和return false
是不同的,前者是阻止事件向父级传递;后面是阻止事件的本身默认的行为,比如链接跳转的事件我想要阻止,就可以增加preventDefault()
这样的函数。
下面举一个事件冒泡的例子:
<th>NO.
<div class="dpdown">
<ul>
<li><input type="checkbox" value=""><span>aaa</span></li>
<li><input type="checkbox" value=""><span>bbb</span></li>
</ul>
</div>
</th>
$("th").bind("click",function(event){
var th_width = $(this).width();
$(this).children("div").children(".dpdown").width(th_width).slideToggle("fast")
$("li").bind("click",function(event){
event.stopPropagation()
})