jQuery学习笔记2——事件冒泡
所谓冒泡事件就是在多个元素嵌套时,单击里层的元素会依次触发外层的元素,这样会引起一些意料之外的效果。看事件代码:
Code
停止事件冒泡
方法一:使用jQuery中的stopPropagation()方法
//为span元素绑定click事件
$("span").bind("click",function(event){
var txt = $("#msg").html()+"<p>内层span元素被单击</p>"
$("#msg").html(txt);
event.stopPropagation();
})
$("span").bind("click",function(event){
var txt = $("#msg").html()+"<p>内层span元素被单击</p>"
$("#msg").html(txt);
event.stopPropagation();
})
这样就可以在单击span时而不触发div,body事件了。(注意function中event参数的添加)
方法二:使用return false;
//为span元素绑定click事件
$("span").bind("click",function(event){
var txt = $("#msg").html()+"<p>内层span元素被单击</p>"
$("#msg").html(txt);
return false;
})
$("span").bind("click",function(event){
var txt = $("#msg").html()+"<p>内层span元素被单击</p>"
$("#msg").html(txt);
return false;
})