jQuery Event.stopPropagation() 函數詳解

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   
} );

運行代碼