一、事件冒泡

在浏览器客户端应用平台，基本上都是以事件驱动的，就是说去执行某个事件，然后做出相应的操作。

事件冒泡就是在事件开始时，由最具体的元素（文档中最底层的那个节点）接受，然后逐级向上传播到最不具体的节点（文档）。比如说，在一个页面有一个div元素，加上一个点击事件，在点击事件触发的时候，它的传递过程就是由div→body→html→document（老版本暂且不谈），它会沿着DOM树逐级的传递。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.outer{width: 200px;height: 200px;background: red;z-index: 1;}.cent{width: 100px;height: 100px;background: blue;position: absolute;right: 0;left: 0;bottom: 0;top: 0;margin:auto;z-index: 2;}.insert{width: 50px;height: 50px;background: orange;position: absolute;right: 0;left: 0;bottom: 0;top: 0;margin:auto;z-index: 3;}div{position: relative;}</style></head><body><div class="outer"><div class="cent"><div class="insert"></div></div></div></body><script type="text/javascript">var Outer=document.getElementsByClassName("outer")[0];var Cent=document.getElementsByClassName("cent")[0];var Insert=document.getElementsByClassName("insert")[0];var aBody=document.getElementsByTagName("body")[0];Outer.onclick=function(){console.log("aaa")}Cent.onclick=function(){console.log("bbb")}Insert.onclick=function(){console.log("ccc")}aBody.onclick=function(){console.log("我是body")}</script>
</html>

在这个嵌套的层级关系中，点击Insert这个元素的时候会依次输出ccc、bbb、aaa、我是body，这就是事件冒泡机制。

二、阻止事件冒泡

阻止事件冒泡的方法有两种：

storpPrapagation() // 不支持IE低版本

cancelBubble=true

兼容写法：

if(event.storpPrapagation){

event.storpPrapagation();

}else{

cancelBubble=true;

}

还拿上面的举例：

<script type="text/javascript">var Outer=document.getElementsByClassName("outer")[0];var Cent=document.getElementsByClassName("cent")[0];var Insert=document.getElementsByClassName("insert")[0];var aBody=document.getElementsByTagName("body")[0];Outer.onclick=function(e){var evt=e||event;evt.stopPropagation();console.log("aaa")}Cent.onclick=function(){console.log("bbb")}Insert.onclick=function(){console.log("ccc")}aBody.onclick=function(){console.log("我是body")}</script>

在outer元素上阻止冒泡，控制台输出的就只有ccc、bbb、aaa，而没有‘我是body’，就是因为冒泡事件在执行到outer元素的时候被阻止了，所以body并没有执行点击事件。

点滴的积累，最终会形成汪洋大海。

事件冒泡机制和如何阻止冒泡相关推荐

分享一个旋钮插件 jquery.knob.js 新增change事件中回调返回值功能以及阻止冒泡事件
本来都要休息了还是打开github,解决了线上一个插件的兼容性. 看来今晚能睡的比较踏实了! 插件介绍 jquery-knob是我用到的UI设计比较清新的旋钮插件之一,应用灵活,体积小,功能强大. 图 ...
html 传参阻止冒泡,angular阻止冒泡事件
当元素多层嵌套的时候,每层都有点击事件,它就会发生冒泡,一层一层的触发,但有时候我们只想触发某一层,不想让其他层的事件触发,这就需要阻止冒泡事件了. 以angular项目为例,我们都知道angular ...
JS如何阻止冒泡事件
1.背景 1.1 什么是事件冒泡当一个元素接收到事件的时候会把他接收到的事件传给自己的父级,一直到window . 优点:事件委托可以利用事件冒泡,来达到只指定一个事件处理程序就可以管理某一项类型 ...
a标签js阻止跳转_前端笔试知识点：阻止冒泡
我们先来看一道BOSS直聘上面的选择题: 你知道这道题选什么吗? - - - - - - - - - - - 没错,选D 如果你知道选D的原因,那你就不用往下面看了,节约你宝贵的时间: 如果你不知道, ...
什么是冒泡，怎么阻止冒泡，冒泡排序
冒泡:在一个对象上触发某个事件,如果定义了这个事件,就调用处理,没定义或返回true,这个事件就会向父级传播,直到被处理为止举个栗子 <div @click="this.alert( ...
重新认识vue之事件阻止冒泡
冒泡的表现近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...
简单的鼠标和键盘事件+阻止默认阻止冒泡+dom0，dom2
什么是事件在我们学习DOM之后,事件就是我们必不可少的一块知识点了,事件其实就是我们的一些操作需要在用户来完成之后才执行的.比如我们PC端的点击事件,键盘事件,以及我们移动端的的触屏事件.接下来咱们 ...
react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
壹 ❀ 引在前面两篇文章中,我们花了较大的篇幅介绍react的setState方法,在介绍setState同步异步时提到,在react合成事件中react对于this.state更新都是异步,但在原 ...
JS——事件冒泡机制
1. 事件在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可 ...

事件冒泡机制和如何阻止冒泡

一、事件冒泡

二、阻止事件冒泡

事件冒泡机制和如何阻止冒泡相关推荐

最新文章

热门文章