stopPropagation()函數用于阻止當前事件在DOM樹上冒泡。

根據DOM事件流機制，在元素上觸發的大多數事件都會冒泡傳遞到該元素的所有祖輩元素上，如果這些祖輩元素上也綁定了相應的事件處理函數，就會觸發執行這些函數。

使用stopPropagation()函數可以阻止當前事件向祖輩元素的冒泡傳遞，也就是說該事件不會觸發執行當前元素的任何祖輩元素的任何事件處理函數。

該函數只阻止事件向祖輩元素的傳播，不會阻止該元素自身綁定的其他事件處理函數的函數。event.stopImmediatePropagation()不僅會阻止事件向祖輩元素的傳播，還會阻止該元素綁定的其他(尚未執行的)事件處理函數的執行。

此外，由于live()函數并不是將事件處理函數直接綁定到自己身上，而是"委托"綁定到祖輩元素上，由祖輩元素來觸發執行。live()函數會先一次性冒泡到文檔的頂部，然后為符合條件的元素觸發事件。因此，stopPropagation()函數無法阻止live事件的冒泡。

同樣地，delegate()函數也是"委托事件函數"，只有事件冒泡傳遞到"受委托"的祖輩元素才會被觸發執行。因此，stopPropagation()函數無法阻止該元素到"受委托"的祖輩元素之間的事件冒泡。

該函數屬于jQuery的Event對象。

語法

eventObject.stopPropagation( )

返回值

stopPropagation()函數沒有返回值，也可以說返回值為undefined。

示例&說明

請參考下面這段HTML代碼：

<div>
? ? <p>段落文本內容
? ? ? ? <input type="button" value="點擊" />
? ? </p>
</div>

與event.stopPropagation()函數相關的jQuery示例代碼如下：

// 為所有div元素綁定click事件
$("div").click( function(event){
? ? alert("div-click");
} );

//為所有p元素綁定click事件
$("p").click( function(event){
? ? alert("p-click");
} );

//為所有button元素綁定click事件
$(":button").click( function(event){
? ? alert("button-click");
? ? // 阻止事件冒泡到DOM樹上
? ? event.stopPropagation(); // 只執行button的click，如果注釋掉該行，將執行button、p和div的click ?
} );

運行代碼

注意，live()函數無法阻止事件的冒泡傳遞，相應的jQuery示例代碼如下(仍參照上面的HTML代碼)。點擊按鈕，p-click、div-click、button-click都會執行：

// 為所有div元素的click事件綁定處理函數
$("div").click( function(event){
? ? alert("div-click");
} );

// 為所有p元素的click事件綁定處理函數
$("p").click( function(event){
? ? alert("p-click");
} );

// 為div元素內的所有button元素的click事件綁定處理函數
$("div").live("click", ":button", function(event){
? ? alert("button-click");
? ? event.stopPropagation();
} );


// 點擊按鈕，所有事件處理函數都會執行
// 因為live()函數先直接冒泡到document，然后再來觸發事件，因此它無法阻止事件冒泡(執行函數時都已經冒泡完畢，當然無法阻止)

運行代碼

delegate()函數無法阻止該元素和"受委托"元素之間的事件冒泡，相應的jQuery示例代碼如下(仍參照上面的HTML代碼)。點擊按鈕，會執行p-click、button-click：

// 為所有div元素的click事件綁定處理函數
$("div").click( function(event){
? ? alert("div-click");
} );

// 為所有p元素的click事件綁定處理函數
$("p").click( function(event){
? ? alert("p-click");
} );

// 為div元素內的所有button元素的click事件綁定處理函數
$("div").delegate(":button", "click", function(event){
? ? alert("button-click");
? ? event.stopPropagation();
} );

// 點擊按鈕，會執行p-click和button-click
// 因為delegate()函數會把button元素的點擊事件委托給div元素來觸發，所以事件必須冒泡到div元素才能觸發，它無法阻止button到div之間的事件冒泡，所以會執行p-click。

轉載于:https://www.cnblogs.com/soundcode/p/5377778.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的jQuery Event.stopPropagation() 函数详解的全部內容，希望文章能夠幫你解決所遇到的問題。

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