今天给大家分享:如何阻止事件冒泡和默认行为?
分享人:聂义中
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
事件冒泡
当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播到父级去处理。
默认行为
浏览器的一些默认的行为。例如:如链接点击后跳转到相应的页面,提交按钮点击时会提交表单数据、鼠标点击右键会弹出菜单,滑动滚轮控制滚动条等等。
2.知识剖析
事件冒泡与默认事件举例
3.常见问题
如何阻止事件冒泡和默认事件?
4.解决方案
阻止事件冒泡
非IE提供stopPropagation()方法,使用event对象在事件函数中调用就行IE中提供的是,cancelBubble属性,默认为false,当它设置为true时,就是阻止事件冒泡,也是用event对象在事件函数中调用
阻止默认行为
非IE提供preventDefault()方法来取消事件默认行为,但是只有当cancelable属性设置为true的事件,才可以使用preventDefault()来取消事件默认行为,使用event对象在事件函数中调用就行IE中提供的是returnValue属性,默认为true,当它设置为false时,就是取消事件默认行为,也是用event对象在事件函数中调用
5.编码实战
6.扩展思考
还有什么方法可以在阻止事件冒泡和默认行为
returnfalse
原生jsreturnfalse只会阻止默认行为
jQuery里面returnfalse既可以阻止冒泡还可以阻止默认行为
7.参考文献
8.更多讨论
1 事件冒泡有可以怎么应用?
当一个容器的所有子元素的点击事件都有相同的效果的时候,可以把这些相同的效果绑定到容器元素上。
2 冒泡跟捕获有什么区别?
冒泡是从最内层向外进行,而捕获是从最外层向里层层进行,刚好相反
3 如果同时还存在冒泡和捕获,他们的先后顺序是怎么样的?
一般来说是先进行捕获,再进行冒泡,但是也可以自己定义他们的先后顺序。
鸣谢
感谢大家观看
BY:聂义中
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
------------------------------------------------------------------------------------------------------------------------