2012-06-08 80 views
4

我真的不明白e.stopPropagation()是做什麼的。stopPropagation()「防止事件冒泡DOM樹」:這意味着什麼?

如果我有一個link使用return false到處理程序我應該得到我想要的東西(防止默認的鏈接行爲,所以它並不「呼」的下一個HREF位置):

<a id="myLink" href="http://www.google.com">Go to google</a>​ 

$('#myLink').click(function (e) { 
    alert("No, you don't go to Google"); 
    return false; 
});​ 

添加e.stopPropagation()什麼都可以我得到了嗎?你能給我一個很好的例子,向我展示e.stopPropagation()可以做什麼?

+1

如果你'返回false',那麼它與e.preventDefault()和e.stopPropagation()相同,因爲它是一個jQuery處理函數。 – Esailija

回答

10

簡單,stopPropagation停止任何事件冒泡到它的容器,其容器的容器等等等等

這裏是一個活生生的例子:http://jsfiddle.net/5B7sw/

HTML:

<div id="container"> 
    <button id="propagate">Propagate</button> 
    <button id="nopropagate">Do not Propagate</button> 
</div> 

和JS:

$('#container').click(function(){ 
    console.log('container click') ; 
}); 


$('#propagate').click(function(){ 
    console.log('propagateclick'); 
}); 


$('#nopropagate').click(function(e){ 
    console.log('nopropagateclick'); 
    e.stopPropagation(); 
}); 

單擊按鈕t itle「傳播」(默認行爲)將寫入「傳播點擊」和「容器點擊」到控制檯。點擊包含呼叫e.stopPropagation()的按鈕將不會打印「容器點擊」消息,因爲到容器的傳播已停止。

+0

這就是我想要的!謝謝你的解釋:) – markzzz

+0

很高興知道jQuery團隊如何避免這個問題,使用獨​​奏preventDefault();實際上他們應該以某種方式使用「返回假」,這種做法與阻止+停止傳播一樣。這是interessant ... – markzzz

1

在你的例子中e.stopPropagation()什麼都不會做。

e.stopPropagation()可用於嵌套元素的情況下防止其他元素接收事件。

0

它不是你認爲它是..

停止傳播史意味着同一事件不會傳播到其父標籤。

0

event.stopPropagation()將防止事件冒泡通過其祖先。這意味着使用.delegate().live()與祖先相關的任何處理程序都不會觸發。下面是一個演示來說明這個事實:http://jsfiddle.net/fSBGC/6/