阻止事件冒泡或捕獲階段

2021-08-19 07:14:00 字數 841 閱讀 4235

預設情況下,多個事件處理函式會按照dom事件流模型中的順序執行。如果子元素上發生某個事件,不需要執行父元素上註冊的事件處理函式,那麼我們可以停止捕獲和冒泡,避免沒有意義的函式呼叫。前面提到的5種事件繫結方式,都可以實現阻止事件的傳播。由於第5種方式,是最推薦的做法。所以我們基於第5種方式,看看如何阻止事件的傳播行為。ie8以及以前可以通過 window.event.cancelbubble=true阻止事件的繼續傳播;ie9+/ff/chrome通過event.stoppropagation()

阻止事件的繼續傳播。

// 目標  

outc.addeventlistener('click',function(event),false);  

// 事件冒泡  

outa.addeventlistener('click',function(),false);  

// 事件捕獲  

outa.addeventlistener('click',function(),true);

vara1 = document.getelementbyid("a1");

vara2 = document.getelementbyid("a2");

vara3 = document.getelementbyid("a3");

a3.onclick =function()

a2.onclick =function()

a1.onclick =function()

冒泡事件 捕獲事件 阻止事件

father sonview code 建立父子盒子 view code 建立兩個盒子的樣式 直接上圖 冒泡事件 div1代表父盒子 div2代表子盒子 當子盒子被點選時會先處理自己,搞完自己就產生了冒泡 就是向上查詢直到document結束 為什麼不是html而是document?不是都在html...

js 事件冒泡或事件捕獲?

事件傳遞有兩種方式 冒泡 與捕獲 事件傳遞定義了元素事件觸發的順序。如果你將 元素插入到 元素中,使用者點選 元素,哪個元素的 click 事件先被觸發呢?在 冒泡 中,內部元素的事件會先被觸發,然後再觸發外部元素,即 元素的點選事件先觸發,然後會觸發 元素的點選事件 在 捕獲 中,外部元素的事件會...

瀏覽器事件捕獲冒泡以及阻止冒泡

瀏覽器事件捕獲冒泡以及阻止冒泡一 瀏覽器的dom事件流 dom事件流有三個階段,捕獲階段 目標階段 冒泡階段,不管是有沒有繫結事件,只要發生點選事件,事件的處理將從dom層次的根開始,而不是從觸發事件的目標元素開始,事件被從目標元素的所有祖先元素依次往下傳遞,直到目標元素然後再從目標元素冒泡到根元素...