一. 有話要說

　　事件冒泡這個話題已經被園子里的朋友說透了，已經沒什么要講的了，但是由于呢我這邊有個小問題剛好跟這個事件冒泡有關，就突然性想寫個總結；一方面是給自己增加印象，另一方面給園子的新手們，提供一些方便 ^_^

　二. 事件冒泡

　　什么是事件冒泡？ 定義百度一搜一大把，我就不細講了；我總結就是：dom行為機制的觸發，并且存在上下級元素（父子級），如果不做些特殊操作，就會產生重復觸發這個行為機制（事件）

　　具體表現：

　　<div style="width:100%;height:700px;">　　

　　　　<div style="width: 200px; height: 50px; border: 1px solid #000;">

　　　　</div>

　　</div>

　　jq:

$(document).ready(function () {

　　$("body").bind("click", function () {
　　　　alert("body元素被點擊了");
　　});
　　$("div").bind("click", function () {
?　 ?　　alert("div元素被點擊了");
?　?});
});

這樣運行就會發現，當點擊div范圍的時候 會先觸發div的點擊事件，然后再是body的點擊事件；為什么？

這是因為當我們為body和div分別綁定點擊事件的時候，由于body是div的父元素，當div被點擊時，dom會回溯找到它的(div)的父元素，并查看有沒有為父元素綁定事件，有則觸發，沒有就繼續查找div的父元素 這樣不斷的向上回溯查找 這就形成了事件冒泡。

這顯然不是我們想到的結果，那怎么樣才能做到當點擊div的時候就只觸發div的點擊事件，而不要觸發body的點擊事件？

解決方案百度，園子里太多了，所以我這里就大概總結了那么幾種方法

? ?三. 解決方法

　　方法1. 直接在子元素(這里的div)js的最后增加一個 return false;

　　方法2. 當你把方法1的子元素的綁定方法抽出來放在元素上的onclick屬性上的時候，方法1就不管用了，那么就要做以下處理：

　　function Test2(event) {
　　　　alert("div元素被點擊了");
　　　　event = window.event || event;
　　　　if (event.stopPropagation)　　　　//停止向上傳播事件 ? 關于stopPropagation的解釋，請點擊這stopPropagation
　　　　　　event.stopPropagation();
　　　　else
　　　　　　event.cancelBubble = true;　//如果瀏覽器不支持stopPropagation 則設置cancelBubble來取消上傳傳播事件冒泡
};

　 方法3. 除了以上方法，還有一個方法值得注意，這個方法一開始我也不知道，是查了資料才知道的　

　　$("body").bind("click", function (e) {
　　　　e = e || window.event;
　　　　var src = e.target || e.srcElement;
　　　　if (src.tagName == "DIV") { //這里可以用屬性，只要是符合dom標簽屬性規則的 比如 id等
　　　　//說明是點擊了div
　　　　　　alert("div元素被點擊了");
　　　　}
　　　　else {
　　　　　　//是在div范圍外點擊的
　　　　　　alert("body元素被點擊了");
　　　　}
　　});

?　希望這些對遇到事件冒泡的同學有些幫助 就寫到這里了！

　　

轉載于:https://www.cnblogs.com/ms27946/p/5088714.html

總結

以上是生活随笔為你收集整理的JS中的事件冒泡——总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。