1

私はdivを持っています

<div class="myDiv">
  <a href="#" class="myLink">somelink</a>
  <div class="anotherDiv">somediv</div>
</div>

ここで、イベント委任とバブリングの概念を使用して、myDiv、myLink、anotherDiv のいずれかからのクリックをインターセプトしたいと考えています。

ベスト プラクティスによると、これは、ドキュメント自体でグローバルにクリックをリッスンすることで実行できます (したがって、「委任」という用語が使われます)。

$(document).click(function(e) {
  var $eventElem = $(e.target);
  var bStopDefaultClickAction = false;

  if ($eventElem.is('.myDiv'))
  {
    alert('Never alerts when clicking on myLink or anotherDiv, why????');
    bStopDefaultClickAction = true;
  }

  return bStopDefaultClickAction;
});

上記のアラートの質問を参照してください。クリックバブルという印象を受けました。そして、ドキュメントが実際に私のクリックを受け取り、委任を開始するため、多少そうです。しかし、myLink と anotherDiv のクリックのバブリング メカニズムは、if ステートメントが作動しないため、機能していないようです。

それとも、次のようなものですか: クリックすると、クリックされた src 要素から割り当てられた委譲オブジェクト (この場合はドキュメント) まで、1 ステップだけバブルしますか? その場合、次のように委任を処理する必要があります。

$('.myDiv').click(function(e) {
  //...as before
});

しかし、多くの 'my​​Div' ハンドラーとおそらく他のハンドラーが必要になるため、この種の委任の目的は無効になります... 'document' イベント委任オブジェクトを 1 つだけ持つのは非常に簡単です。

誰でもこれがどのように機能するか知っていますか?

4

5 に答える 5

2

JQuery からライブ イベントを使用する必要があります (1.3 以降)。イベントの委任を使用します。

http://docs.jquery.com/Events/live

したがって、コードは次のようになります。

 $(".myDiv").live("click", function(){
      alert('Alert when clicking on  myLink elements. Event delegation powaa !');

 });

これにより、イベント委譲のすべての利点 (より高速、1 つのイベント リスナーなど) を苦労することなく享受できます ;-)

于 2009-11-18T11:39:38.007 に答える
0

イベント対象は変更ありません。jquery live の動作をミラーリングし、実際に $eventElem.closest('. myDiv') が一致するかどうかを確認する必要があります。

試す：

$(document).click(function(e) {
  var $eventElem = $(e.target);
  var bStopDefaultClickAction = false;

  if ( $eventElem.closest('.myDiv').length )
  {
    alert('Never alerts when clicking on myLink or anotherDiv, why????');
    bStopDefaultClickAction = true;
  }

  return bStopDefaultClickAction;
});
于 2009-11-18T11:43:31.567 に答える
0

Event.target は常にイベントをトリガーした要素であるため、'myLink' または 'anotherDiv' をクリックすると、$(e.target); を使用してこれらのオブジェクトへの参照を保存します。したがって、実際に行うことは次のとおりです: $('.myLink').is('.myDiv') これは false を返します。それが alert() が実行されない理由です。

この方法でイベント委任を使用する場合は、event.target が要素またはその子のいずれかであるかを確認する必要があります。jQuery を使用すると、次のように実行できます。

$(e.target).is('.myDiv, .myDiv *')
于 2009-11-18T11:42:46.270 に答える
0

これをチェックしてください：1ページのワンクリックハンドラー

var page = document.getElementById("contentWrapper");
page.addEventListener("click", function (e) {
   var target, clickTarget, propagationFlag;      
   target = e.target || e.srcElement;
   while (target !== page) {
      clickTarget = target.getAttribute("data-clickTarget");
      if (clickTarget) {
          clickHandler[clickTarget](e);
          propagationFlag = target.getAttribute("data-propagationFlag");
      }
      if (propagationFlag === "true") {
          break;
      }
      target = target.parentNode;
   }
});
于 2014-01-03T06:12:55.053 に答える
0

私にはうまくいくようです。ここで試してみてください：http://jsbin.com/uwari

于 2009-11-18T11:43:12.043 に答える