阻止事件冒泡現象

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

事件冒泡：

多個元素巢狀，有層次關係，這些元素都註冊了相同的事件，如果裡面的元素的出發了事件，外面的元素該事件也觸發

在這裡有必要強調一下相同的事件  不一定完全相同即   都是 點選事件  或者 都是 滑鼠移入事件

來個例子

<

div 
class
="at1" id = "1"
>
<
div 
class
="at2" id = "2"
>
<
div 
class
="at3" id = "3"
>
div>
div>
div>

再給他們寫好樣式

1

.at1 
6.at2 
11.at3 

然後我們為這三個註冊點選事件

1 my$("1").onclick = function

() 4     my$("2").onclick = function
() 7     my$("3").onclick = function
() 

你點選黃色的div那麼黃色和紅色 都會背景顏色變白   即：黃色的事件觸發 使得事件冒泡 導致紅色div事件觸發

你點選粉色的div 那麼所有的div都會背景顏色變白   即：粉色的事件觸發使得事件冒泡 導致黃色div事件觸發 

繼而導致

紅色div觸發

我們該如何阻止事件冒泡呢?

首先我來說一下事件處理引數物件

這個物件呢  在事件處理的函式中可以驗證一下它的存在

你測完會發現  谷歌火狐都有這個事件處理引數物件    而 ie8是undefined  所以呢是ie 8 是不支援的

my$("3").onclick = function() 

如果你點了div3  那麼控制台就會有乙個  1 列印出來  說明這個事件處理引數物件是真實存在的
第一種瀏覽器  火狐瀏覽器中的阻止事件冒泡 當然這個谷歌也支援
阻止事件冒泡 是利用這個事件處理引數物件來進行的
我們要利用 所以就把引數傳進來
**如下

my$("3").onclick = function(e) 

第二種瀏覽器  ie瀏覽器種的阻止事件冒泡 當然這個谷歌也支援

**如下

my$("3").onclick = function() 

所以這個**會牽扯到相容的問題 我們最後把兩種封裝成乙個相容**即可 

阻止事件冒泡

事件冒泡的概念在此不再重複，下面主要介紹防止事件冒泡的方法 符合w3c標準的event.stoppropagation 和ie瀏覽器下的window.event.cancelbubble true 上述 注釋中標註了阻止事件冒泡的方法，下面是針對兩種方法的封裝 function stopbubble...

阻止事件冒泡

js div li click function e div ul click function e div click function e 說明 1.事件冒泡就是觸發孩子事件時，如果他的父親也有個事件，那麼他執行孩子事件後還會執行父親的事件。2，在孩子節點執行完，return false 這樣就...

阻止事件冒泡

因為我的 ui checkbox new 是頁面新新增的元素，所以在繫結事件的時候，就用on。在在用on繫結事件的時候，這個click事件會觸發兩次。用alert函式測試的時候，1 11 1 11 在網上尋找解決方法 在 中加入return false 阻止冒泡事件後，程式就可以正常執行，不會執行兩...