1

多くの JS スクリプトでイベント委任を使用しています。通常、私が行うことは、グローバル イベント ハンドラーを用意し、イベントを受け取った要素までトレースすることです。問題は、イベントをインストールするときに jQuery のフィルタリング セレクターを常に使用できるとは限らないことです。たとえば、使用している場合:

$('.todo').on('click', function(e) {
  // The event target is guaranteed to be something having the
  // class .todo
  var todo = e.target;
});

それならとても簡単です

ただし、バックボーンでビュー イベントの委譲を行っているので、イベント ハンドラーをインストールできます。

 'click .todo' : 'someHandlerFunction'

問題は、そのハンドラー関数にあります。右側のイベント ターゲットを受け取ることが保証されていませんが、代わりにその子孫の 1 つを取得できます。つまり、イベント オブジェクトを取得していますが、バブリングにより、そのターゲットは ".todo" クラスを持つ何かの内部の要素になることもあります。

理想的には、これを行う単純な関数が必要です。

 $(document.body).on('click', function(evt) {
   var interestingElementOrNull = jQuery(evt.target).parentOrSelf('.todo');
 });

しかし、最初hasClass()にイベント ターゲットに対して実行する必要があり、次に (一致しない場合)parent()呼び出しを実行する必要があります。

これを行うためのより良い/標準的な方法はありますか?

4

2 に答える 2

0

毎回イベントターゲットを手動でチェックしたくない場合は、独自のプラグインを作成できます。 

$.fn.parentOrSelf = function(selector){
    return this.is(selector) ? this : this.closest(selector);
}
于 2013-03-19T19:37:20.800 に答える
0

Wireyが言うように、ancestorOrSelf()ではなく必要な場合は、 closest（）parentOrSelf()を使用するだけです。

var element = jQuery(evt.target).closest(".todo");

実際に必要な場合は、 parent（）をaddBack（）*parentOrSelf()にチェーンして、結果にfilter（）を適用できます。

var element = jQuery(evt.target).parent().addBack().filter(".todo");

ただし、どちらの場合も、一致するものがない場合elementではなく、空のjQueryオブジェクトになることに注意してください。何かが一致したかどうかを判断したい場合は、その長さnullプロパティをテストできます。

* jQuery 1.8より前のandSelf（）addBack()という名前でした。

于 2013-03-19T19:37:34.937 に答える