阻止事件冒泡現象

首先來解釋一下啥是事件冒泡現象

事件冒泡：

多個元素嵌套，有層次關係，這些元素都註冊了相同的事件，若是裏面的元素的出發了事件，外面的元素該事件也觸發

在這裏有必要強調一下  相同的事件  不必定徹底相同  即   都是 點擊事件  或者 都是 鼠標移入事件

來個例子

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

因此這個代碼會牽扯到兼容的問題 咱們最後把兩種封裝成一個兼容代碼便可