jQuery 事件冒泡

Question

我想了解如何准確解釋冒泡。 這是否意味着要提升 HTML 代碼層次結構或其他什么？

其次，我正在經歷一個例子，但我無法理解它說的最后一部分

基於 P 的點擊處理程序監聽點擊事件，然后阻止它被傳播（冒泡）

這是什么意思？

Answer 1

“冒泡”的概念就像你有一個帶有點擊事件的子元素，但你不希望它觸發父元素的點擊事件。 您可以使用event.stopPropagation() 。

event.stopPropagation()基本上說只將此點擊事件應用於這個孩子節點並且不要告訴父容器任何事情，因為我不希望他們做出反應。

事件捕獲：

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

事件冒泡：

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

如果您使用live()或delegate() ，則需要return false; ，雖然它可能不起作用。 閱讀下面的報價。

根據jQuery 文檔：

由於 .live() 方法在事件傳播到文檔頂部后處理事件，因此不可能停止實時事件的傳播。 類似地，由 .delegate() 處理的事件將傳播到它們被委托的元素； 綁定在 DOM 樹中它下面的任何元素上的事件處理程序將在調用委托的事件處理程序時已經執行。 因此，這些處理程序可能會通過調用 event.stopPropagation() 或返回 false 來阻止委托的處理程序觸發。

過去這是一個平台問題，Internet Explorer 有一個冒泡模型，而 Netscape 更關注捕獲（但兩者都支持）。

W3C 模型要求您能夠選擇您想要的。

我認為冒泡更受歡迎，因為如前所述，有一些平台只支持冒泡……而且它作為“默認”模式是有意義的。

您選擇哪一個很大程度上取決於您正在做什么以及對您有意義的內容。

更多信息http://www.quirksmode.org/js/events_order.html

另一個很棒的資源： http : //fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Answer 2

return false;

將防止“冒泡”。 它用於停止默認操作，例如檢查復選框、打開選擇、單擊等。

要在使用 .live() 進行一次綁定后阻止進一步的處理程序執行，處理程序必須返回 false。 調用 .stopPropagation() 不會實現這一點。

來自jQuery .live() 中的警告

---

推理（感謝@AlienWebguy）：

stopPropagation()不適用於live()是live()將事件綁定到文檔，因此在它觸發時，它沒有其他地方可以傳播。

Answer 3

它說的是live ()方法將處理程序附加到document元素並檢查事件的target以查看它來自何處。 如果目標與選擇器匹配，則它會觸發 eventHandler。 所有這些都依賴於冒泡事件系統。

在示例中， p元素上的點擊處理程序，witch 是a元素的祖先，通過返回false取消冒泡。 那么document元素將永遠不會收到該事件，因此它不會觸發事件處理程序。

Answer 4

在下面的例子中，它附加了一個點擊事件來錨定 id 為“anchor”。 該錨點位於一個 div 中，該 div 還附加了一個 click 事件。 如果我們點擊這個錨點，它就像我們點擊包含的 div 一樣好。 現在，如果我們想在這個錨點點擊上做一些事情，但不想觸發 div 的點擊，我們可以停止事件冒泡，如下所示。

<div id="div">

<a href="google.com" id="anchor"></a>

</div>


$("#div").click(function(e){//On anchor click this event will not be fired as we have stop the event propagation in anchor click handler.

   //Do stuff here

});

$("#anchor").click(function(e){

   //Do stuff here

   //This line stops the event bubling and 
   //jquery has abstracted it in the event object to make it cross browser compatible.
   e.stopPropagation();
});

Answer 5

這兩個鏈接對事件冒泡（以及常用的事件概念）提供了清晰而詳盡的解釋。

http://jqfundamentals.com/chapter/events
http://www.mattlunn.me.uk/blog/2012/05/what-does-event-bubbling-mean/

從第一個鏈接

事件將針對a元素以及包含a所有元素觸發 - 一直到document

從第二個鏈接

<div>
    <h1>
        <a href="#">
            <span>Hello</span>
        </a>
    </h1>
</div>

假設我們點擊了跨度，這會導致在跨度上觸發點擊事件； 到目前為止沒有什么革命性的。 但是，該事件然后傳播（或冒泡）到 span 的父級 (the )，並在其上觸發 click 事件。 這個過程對下一個父元素（或祖先）重復，直到文檔元素。

現在讓我們把所有這些放到 DOM 的上下文中。 DOM 是一棵...樹，每個元素都是 DOM 樹中的一個節點。 冒泡只是一個節點的遍歷， some element到根節點， document （跟隨你的父母直到你不能再）

Answer 6

還：

event.stopPropagation()

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

Answer 7

是的，該事件在樹上上升，如果任何元素具有該事件的處理程序，它將被調用。 通過在元素之一的處理程序中添加return:false將防止事件冒泡。