如何阻止事件冒泡和默认行为？

                     今天给大家分享：如何阻止事件冒泡和默认行为？

                                             分享人：聂义中

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

                               事件冒泡

 当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

                               默认行为

浏览器的一些默认的行为。例如：如链接点击后跳转到相应的页面，提交按钮点击时会提交表单数据、鼠标点击右键会弹出菜单，滑动滚轮控制滚动条等等。

                               2.知识剖析

                      事件冒泡与默认事件举例

                                                   demo

                               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:聂义中

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

------------------------------------------------------------------------------------------------------------------------