首頁  >  文章  >  web前端  >  JS冒泡事件的快速解決方法_javascript技巧

JS冒泡事件的快速解決方法_javascript技巧

WBOY
WBOY原創
2016-05-16 17:08:591234瀏覽

何為冒泡事件
就是當設定了多個div的巢狀時;即建立了父子關係,當父div與子div共同加入了onclick事件時,當觸發了子div的onclick事件後,子div進行對應的js操作。但是父親div的onclick事件同樣會被觸發。這就造成了事件的多層並發,導致了頁面混亂。這就是冒泡事件。

消除冒泡事件的方法
阻止JavaScript事件冒泡傳遞(cancelBubble 、stopPropagation)

下面的一段程式碼即可以很好的解釋是麼是冒泡效果,什麼叫消除冒泡效果

複製程式碼 程式碼如下:



阻止JavaScript事件冒泡傳遞(cancelBubble 、stopPropagation)





This is parent1 div.



This is child1.



This is parent1 div.






This is parent2 div.



This is child2. Will bubble.



This is parent2 div.






把程式碼直接複製後,打開點擊child1時不僅會彈出child1 對話框還會彈出parent1

這就是冒泡事件

但點擊chile2只會彈出child2卻不會彈出 parent2,這便是應用了阻止冒泡事件的特效的效果.

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn