欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

阻止事件冒泡现象

程序员文章站 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; }
所以这个代码会牵扯到兼容的问题 我们最后把两种封装成一个兼容代码即可