有人可以解釋這個stopPropagation是如何工作的嗎？

Question

我試圖設置這個「當您單擊的元素之外，關閉」類型的東西使用一些代碼，我就發現了＃1：

$(document).click(function() { 
$('.list-to-hide').hide(); 
}); 

$('.show-list-button').click(function(event) { 
event.stopPropagation(); 
}); 

有人能解釋與stopPropagation後期？我不明白爲什麼需要它。

謝謝！ 馬特

Answer 1

想象一下：

<div> 
    DIV 
    <span> 
     Span 
    </span> 
<div> 

和：

$('div').click(function() { alert('div clicked'); }); 
$('span').click(function() { alert('span clicked'); }); 

Check out what happens when you click each one

當您單擊的跨度，它正好也觸發格，因爲你也可以點擊股利。

現在，如果我們想提醒跨度只我們需要從觸發，當我們點擊跨度停止DIV點擊所以我們這樣做：

$('div').click(function() { alert('div clicked'); }); 
$('span').click(function(e) { alert('span clicked'); e.stopPropagation(); }); 

See what happens now

Answer 2

你看過這個嗎？

http://api.jquery.com/event.stopPropagation/

它會阻止事件冒泡DOM樹，阻止任何父處理程序被通知的事件。

例

殺死上點擊事件冒泡。

$("p").click(function(event){ 
    event.stopPropagation(); 
    // do something 
}); 

Answer 3

event.stopPropagation();防止事件冒泡DOM。沒有這一行，點擊.show-list-button文檔的點擊處理程序也會觸發。有了它，文檔點擊不會觸發。

Answer 4

您的示例代碼中缺少的重要組成部分：

$(document).click(function() { 
    $('.list-to-hide').hide(); 
}); 

$('.show-list-button').click(function(event) { 
    event.stopPropagation(); 
    $('.list-to-hide').show(); 
}); 

沒有event.stopPropagation()，它會顯示在列表中，然後隱藏它，因爲.show-list-button是內的$(document)這樣既單擊處理將開火。 event.stopPropagation()基本上說只適用於這個點擊事件這個孩子節點並不告訴父容器什麼，因爲我不想讓他們反應。

想想這樣 - 你租一輛出租車爲100美元。司機給他的公司80美元。 event.stopPropagation()就像告訴他要保留所有100美元，因爲公司不需要知道關於乘坐的任何事情。