阻止事件冒泡现象
程序员文章站
2022-08-10 09:42:28
首先来解释一下啥是事件冒泡现象 事件冒泡: 多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的出发了事件,外面的元素该事件也触发 在这里有必要强调一下 相同的事件 不一定完全相同 即 都是 点击事件 或者 都是 鼠标移入事件 来个例子 先写出来这三个div的结构 再给他们写好样式 ......
首先来解释一下啥是事件冒泡现象
事件冒泡:
多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的出发了事件,外面的元素该事件也触发
在这里有必要强调一下 相同的事件 不一定完全相同 即 都是 点击事件 或者 都是 鼠标移入事件
来个例子
<div class="at1" id = "1"> <div class="at2" id = "2"> <div class="at3" id = "3"></div> </div> </div>
先写出来这三个div的结构
再给他们写好样式
1 .at1 { 2 width: 300px; 3 height: 300px; 4 background-color: red; 5 } 6 .at2 { 7 width: 200px; 8 height: 200px; 9 background-color: yellow; 10 } 11 .at3 { 12 width: 100px; 13 height: 100px; 14 background-color: pink; 15 }
即他们应该是如图所示的结构
然后我们为这三个注册点击事件
1 my$("1").onclick = function () { 2 this.style.backgroundcolor = "white"; 3 } 4 my$("2").onclick = function () { 5 this.style.backgroundcolor = "white"; 6 } 7 my$("3").onclick = function () { 8 this.style.backgroundcolor = "white"; 9 }
然后这时候冒泡事件的表现呢 就是这样
你点击黄色的div那么黄色和红色 都会背景颜色变白 即:黄色的事件触发 使得事件冒泡 导致红色div事件触发
你点击粉色的div 那么所有的div都会背景颜色变白 即:粉色的事件触发使得事件冒泡 导致黄色div事件触发 继而导致红色div触发
我们该如何阻止事件冒泡呢?
首先我来说一下事件处理参数对象
这个对象呢 在事件处理的函数中可以验证一下它的存在
你测完会发现 谷歌火狐都有这个事件处理参数对象 而 ie8是undefined 所以呢是ie 8 是不支持的
my$("3").onclick = function () { this.style.backgroundcolor = "white";
加一行代码 就能验证 consolo.log(arguments.lenth);
}
如果你点了div3 那么控制台就会有一个 1 打印出来 说明这个事件处理参数对象是真实存在的
第一种浏览器 火狐浏览器中的阻止事件冒泡 当然这个谷歌也支持
阻止事件冒泡 是利用这个事件处理参数对象来进行的
我们要利用 所以就把参数传进来
代码如下
my$("3").onclick = function (e) { this.style.backgroundcolor = "white";
e.stoppropagation(); }
第二种浏览器 ie浏览器种的阻止事件冒泡 当然这个谷歌也支持
代码如下
my$("3").onclick = function () {
this.style.backgroundcolor = "white";
window.event.cancelbubble = true; }
所以这个代码会牵扯到兼容的问题 我们最后把两种封装成一个兼容代码即可