用jquery解决事件冒泡

为什么80%的码农都做不了架构师&＃xff1f;>>>

1.什么是事件冒泡&＃xff1a;

页面上有好多事件&＃xff0c;也可以多个元素响应一个事件.假如:

提示

上面这段代码一共有三个事件,body&＃xff0c;div&＃xff0c;a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒泡的过程是&＃xff1a;a --> div --> body 。a冒泡到div冒泡到body

2.事件冒泡引发的问题。

本来在上面的代码中只想触发元素的onclick事件&＃xff0c;然而

3.jQuery对这个问题进行了必要的扩展和封装.

$("element").bind("click",function(event){

//event为事件对象

//.........

event.stopPropagation(); //停止事件冒泡

});

4.阻止默认行为

网页中的某些元素是有自己的默认行为的&＃xff0c;比如果超链接单节后需要跳转&＃xff0c;提交按钮点击后需要提交表单&＃xff0c;有时需要阻止这些行为&＃xff0c;也就是默认行为。

jquery中可用用preventDefault()的方法来阻止元素的默认行为.

$(&＃39;#submit&＃39;).bind(&＃39;click&＃39;,function(event){

var username &＃61; $(&＃39;#username&＃39;).val();

if(username&＃61;&＃61;""){

alert(&＃39;用户名不能为空!&＃39;);

event.preventDefault(); //阻止默认行为

}

})

5.jquery中对冒泡和默认行为的阻止方法同样也可以改写&＃xff0c;改写后能够达到同样的效果

event.preventDefault(); 改写为&＃xff1a; return false;

event.stopPropagation(); 改写为&＃xff1a; return false;

转:https://my.oschina.net/ykai/blog/10390

理解浏览器历史记录（2）hashchange、pushState