溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“JavaScript事件冒泡機制原理是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
DOM事件流（event flow ）存在三個階段：事件捕獲階段、處于目標階段、事件冒泡階段，事件冒泡順序是由內到外進行事件傳播，事件冒泡是由IE開發團隊提出來的，即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收，然后逐級向上傳播。
聽了簡介介紹之后，您可能不理解，所以舉個例子：
<html><head><title>js事件冒泡測試</title></head><body><p id='content' onclick='alert("content")'><p id='p' onclick='alert("p");'><ul onclick='alert("ul");'><li onclick='alert("li");'>test</li></ul></p></p></body></html>點擊test頁簽，會依次執行li的onclick、ul的onclick、p的onclick，content的onclick，從內到外執行，所以這個就是冒泡事件的簡單例子
最近也遇到了這種情況，所以就去網上搜索資料，簡單學習一下，就是點擊一個按鈕的時候，竟然觸發了兩次，通過排查，發現了冒泡機制導致的，解決方法是禁用事件冒泡機制
w3c的方法是e.stopPropagation()，IE則是使用e.cancelBubble = true
$(element).click(function(e){ e.stopPropagation();//ie e.cancelBubble = true});當然除了冒泡機制會導致onclick被調用兩次外，事件被綁定2次的情況也有可能，解決方法是解除事件，然后再綁定
$(element).unbind('click').click(function() { // todo})“JavaScript事件冒泡機制原理是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
