stopPropagation()函數(shù)用于阻止當(dāng)前事件在DOM樹上冒泡。
根據(jù)DOM事件流機(jī)制，在元素上觸發(fā)的大多數(shù)事件都會(huì)冒泡傳遞到該元素的所有祖輩元素上抹估，如果這些祖輩元素上也綁定了相應(yīng)的事件處理函數(shù)环凿，就會(huì)觸發(fā)執(zhí)行這些函數(shù)急凰。
使用stopPropagation()函數(shù)可以阻止當(dāng)前事件向祖輩元素的冒泡傳遞，也就是說(shuō)該事件不會(huì)觸發(fā)執(zhí)行當(dāng)前元素的任何祖輩元素的任何事件處理函數(shù)蹂窖。
該函數(shù)只阻止事件向祖輩元素的傳播轧抗，不會(huì)阻止該元素自身綁定的其他事件處理函數(shù)的函數(shù)。event.stopImmediatePropagation()不僅會(huì)阻止事件向祖輩元素的傳播瞬测，還會(huì)阻止該元素綁定的其他(尚未執(zhí)行的)事件處理函數(shù)的執(zhí)行横媚。
此外纠炮，由于live()函數(shù)并不是將事件處理函數(shù)直接綁定到自己身上，而是"委托"綁定到祖輩元素上灯蝴，由祖輩元素來(lái)觸發(fā)執(zhí)行恢口。live()函數(shù)會(huì)先一次性冒泡到文檔的頂部，然后為符合條件的元素觸發(fā)事件穷躁。因此耕肩，stopPropagation()函數(shù)無(wú)法阻止live事件的冒泡。
同樣地问潭，delegate()函數(shù)也是"委托事件函數(shù)"猿诸，只有事件冒泡傳遞到"受委托"的祖輩元素才會(huì)被觸發(fā)執(zhí)行。因此狡忙，stopPropagation()函數(shù)無(wú)法阻止該元素到"受委托"的祖輩元素之間的事件冒泡梳虽。
該函數(shù)屬于jQuery的Event對(duì)象。
語(yǔ)法
eventObject.stopPropagation()
返回值
stopPropagation()函數(shù)沒(méi)有返回值去枷，也可以說(shuō)返回值為undefined怖辆。
示例&說(shuō)明
請(qǐng)參考下面這段HTML代碼：
段落文本內(nèi)容
與event.stopPropagation()函數(shù)相關(guān)的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();// 只執(zhí)行button的click，如果注釋掉該行删顶，將執(zhí)行button竖螃、p和div的click
});
// 為所有div元素的click事件綁定處理函數(shù)
$("div").click(function(event){
alert("div-click");
});
// 為所有p元素的click事件綁定處理函數(shù)
$("p").click(function(event){
alert("p-click");
});
// 為div元素內(nèi)的所有button元素的click事件綁定處理函數(shù)
$("div").live("click",":button",function(event){
alert("button-click");
event.stopPropagation();
});
// 點(diǎn)擊按鈕，所有事件處理函數(shù)都會(huì)執(zhí)行
// 因?yàn)閘ive()函數(shù)先直接冒泡到document啥繁，然后再來(lái)觸發(fā)事件菜职，因此它無(wú)法阻止事件冒泡(執(zhí)行函數(shù)時(shí)都已經(jīng)冒泡完畢，當(dāng)然無(wú)法阻止)
delegate()函數(shù)無(wú)法阻止該元素和"受委托"元素之間的事件冒泡旗闽，相應(yīng)的jQuery示例代碼如下(仍參照上面的HTML代碼)酬核。點(diǎn)擊按鈕，會(huì)執(zhí)行p-click适室、button-click：
// 為所有div元素的click事件綁定處理函數(shù)
$("div").click(function(event){
alert("div-click");
});
// 為所有p元素的click事件綁定處理函數(shù)
$("p").click(function(event){
alert("p-click");
});
// 為div元素內(nèi)的所有button元素的click事件綁定處理函數(shù)
$("div").delegate(":button","click",function(event){
alert("button-click");
event.stopPropagation();
});
// 點(diǎn)擊按鈕嫡意，會(huì)執(zhí)行p-click和button-click
// 因?yàn)閐elegate()函數(shù)會(huì)把button元素的點(diǎn)擊事件委托給div元素來(lái)觸發(fā)，所以事件必須冒泡到div元素才能觸發(fā)捣辆，它無(wú)法阻止button到div之間的事件冒泡蔬螟，所以會(huì)執(zhí)行p-click。
