阻止事件冒泡现象

首先来解释一下啥是事件冒泡现象

事件冒泡：

多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里面的元素的出发了事件，外面的元素该事件也触发

在这里有必要强调一下 相同的事件不一定完全相同 即都是点击事件或者都是鼠标移入事件

来个例子

<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;
}

所以这个代码会牵扯到兼容的问题 我们最后把两种封装成一个兼容代码即可

阻止事件冒泡现象

猜你喜欢