web-dev-qa-db-ja.com

jQueryイベントバブリング

バブリングを正確に解釈する方法を理解したいと思います。それは、HTMLコード階層を上に行くことを意味するのでしょうか？

第二に、私は example を通過しました、そしてそれが言う最後の部分を理解できませんでした

Pベースのクリックハンドラーがクリックイベントをリッスンし、伝達されないようにします（バブルアップ）

これは何を意味するのでしょうか？

javascriptjquerylivejquery-eventsevent-bubbling
18
testndtv
_return false;
_

「泡立ち」を防ぎます。チェックボックスのチェック、選択の選択、クリックなどのデフォルトのアクションを停止するために使用されます。

.live（）を使用してバインドした後、ハンドラーが実行されないようにするには、ハンドラーがfalseを返す必要があります。 .stopPropagation（）を呼び出しても、これは達成されません。

From jQuery .live（）の警告

stopPropagation()がlive()で機能しないのは、live()がイベントをドキュメントにバインドするため、起動するまでに他に伝播する場所がないためです。

9
Joe

「バブルアップ」の概念は、クリックイベントを持つ子要素があり、親のクリックイベントをトリガーしたくない場合のようなものです。 event.stopPropagation()を使用できます。

event.stopPropagation()は基本的に、このクリックイベントをこの子ノードにのみ適用し、親コンテナには何も反応させたくないため、親コンテナには何も通知しないと述べています。

イベントキャプチャ：

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

イベントバブリング：

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

live()またはdelegate()を使用している場合、_return false;_が必要ですが、機能しない場合があります。以下の見積もりをお読みください。

jQuery docs ごと：

.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/

38
AlienWebguy

それは、live ()メソッドがdocument要素にハンドラーをアタッチし、イベントのtargetをチェックして、それがどこから来たかを確認することを意味しています。ターゲットがセレクターと一致する場合、イベントハンドラーを起動します。バブリングイベントシステムで休息するものすべて。

この例では、p要素のクリックハンドラーwitchがa要素の祖先であり、falseを返すことによってバブリングをキャンセルします。その場合、document要素はイベントを受信しないため、イベントハンドラーはトリガーされません。

2
Johnny5

以下の例では、IDが「anchor」のアンカーにクリックイベントをアタッチしています。このアンカーは、クリックイベントもアタッチされているdiv内にあります。このアンカーをクリックすると、含まれているdivをクリックするのと同じように機能します。このアンカークリックで何かをしたいが、divのクリックを発生させたくない場合は、以下のようにイベントbublingを停止できます。

<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();
});
1
ShankarSangoli

これらの2つのリンクは、イベントバブリング（および一般的に使用されるイベントの概念）に関する明確で詳細な説明を提供します。

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

最初のリンクから

イベントは、a要素と、aを含むすべての要素に対してトリガーされます— documentまで

2番目のリンクから

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

スパンをクリックすると、スパンでクリックイベントが発生します。これまでに革新的なものはありません。ただし、イベントはスパンの親（）に伝播（またはバブル）し、クリックイベントが発生します。このプロセスは、次の親（または祖先）のドキュメント要素まで繰り返されます。

これをすべてDOMのコンテキストに入れましょう。 DOMは...ツリーであり、各要素はDOMツリーのノードです。バブリングは、ノードsome elementをルートノードdocumentにトラバースするだけです（もうできなくなるまで親をフォローしてください）。

0
Gerald

また：

event.stopPropagation()

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

0
Jason Kaczmarsky

はい、イベントはツリーを上に移動し、要素にそのイベントのハンドラーがある場合、それが呼び出されます。いずれかの要素のハンドラーにreturn:falseを追加することにより、イベントのバブリングが防止されます。

0
Ionut Popa