6

私はちょうどhttp://api.jquery.com/event.stopPropagation/を読んでいました

.live() メソッドは、ドキュメントの先頭に伝播したイベントを処理するため、ライブ イベントの伝播を停止することはできません。

私はこの声明に少し混乱していました.誰かが私に同じことをいくつかの例で説明してもらえますか?

4

2 に答える 2

4

Live メソッドはハンドラーをドキュメントにバインドし、プロパティからイベントをトリガーした要素を識別しevent.targetます。

したがって、実際のハンドラーは (階層に関して) 一番上にあります。

stopPropagationはバブルが DOM 階層を上っていくのを止めますが、ハンドラーはすでに (この.live場合) 一番上にあるので、バブルする上位の場所はありません..

例の試み..

- document
  - div
    - link

クリック イベント ハンドラーをリンクにバインドします (またはメソッドをbindclick使用)。

リンクをクリックするとハンドラーがトリガーされますが、さらにクリック イベントはドキュメントに到達するまで DOM を上っていき、div とドキュメントにバインドされたクリック ハンドラーもトリガーします。(を使用しない場合.stopPropagation)

または、メソッドを使用し.liveてイベント ハンドラーをバインドすると、ドキュメントにバインドされます。ここでリンクをクリックすると、イベント (ハンドラーがバインドされていないため、すぐには発生しません) は自然に DOM を上ります (遭遇したクリック ハンドラーをトリガーします)。ドキュメントに到達すると、独自のハンドラーがトリガーされます。しかし、行くアッパーがないので、stopPropagationこの時点では役に立たない.

于 2011-05-16T16:24:17.110 に答える
2

HTML:

<div id="outer">
   <div id="inner">
       <span>.live() version</span>
   </div>
</div>

<div id="outer2">
   <div id="inner2">
       <span>.delegate() version</span>
   </div>
</div>

JS:

$(function(){

   $('#inner2').delegate('span', 'click', function(e){
      e.stopPropagation(); // indeed, no alert!
   });

   $('span').live('click', function(e){
      e.stopPropagation();
      // we would expect the propagation to stop here, so no alert, right?
   });

   $('#outer2, #outer').click(function(){ alert("Don't reach me!"); });

});

例: http://jsfiddle.net/knr3v/2/

.live()イベントがすでにバブリングした場合にのみ魔法を実行するため、イベントの伝播を停止しても意味がありません-手遅れです。すでにツリーのトップに到達して伝播しています...

于 2011-05-16T16:33:21.663 に答える