深圳web前端项目培训中心

如何处理“JS中的冒泡事件”-Web前端之家

“冒泡事件”在平时项目中经常会遇到，比如我们想做一个日历层弹框效果，点击按钮，日历层弹出，然后点击日历其他地方，日历关闭，但是点击日立层上的空白区域不会关闭（特殊加了选中日历关闭层的事件除外），此时，我们就应该要用到冒泡事件。简单的说，冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。当然，如想更加全面的了解下，首先得学习下“事件冒泡”的具体定义：

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

理论知识说得再多，还不如来个具体的案例，这样大家会学习得更快，走起，走起！

我们一起来看个简单的案例：

HTML：

对应的jQuery代码如下：

当点击span时，会触发div与body 的点击事件。点击div时会触发body的点击事件。

如何防止这种冒泡事件发生呢？

修改如下：

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

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。

下面是案例：

html部分：

还有一种防止默认行为的方法就是return false。效果一样。

代码如下：

同理，上面的冒泡事件也可以通过return false来处理。

看完上面的内容，是不是感觉“冒泡事件“也就那么回事，没我们想象中的那么难；有些知识，当你没接触过的时候，发现有多么多么的难，其实不然，所以我们应该要多去尝试新的技术，避免被淘汰。