2

実際にそれ自体によってトリガーされるカスタム イベントをリッスンする要素が必要です。カスタム イベントは子孫からトリガーされる可能性がありますが、無視する必要があります。それが自分自身に由来することが重要です。イベントをリッスンするために追加の祖先が必要になる場合があるため、これもイベントである必要があります。

.on ( http://api.jquery.com/on/ ) メソッドは、この機能を提供できます。セレクター引数はフィルターとして使用できます。ただし、これはリスナー要素自体を除外するためには機能しません。

要するに:
- イベントはバブリングできる必要があります
- トリガーとリスナーは同じ要素
です - 祖先によってトリガーされた場合、リスナーはカスタムイベントを無視する必要があります

これはどのように達成されますか？

ご要望に応じたユースケース

jquery UI ダイアログ ウィジェットを使用します

$el = $('#dialogDiv');
$el.on('customEvent', $el /* Won't work */, function() {
    //Do whatever
});
$el.dialog({
    open: function() {
        $el.trigger('customEvent');
    }
});
4

3 に答える 3

1

動作しない部分を削除すると、動作します。

$el = $('#dialogDiv');
$el.on('customEvent', function(e) {
    //Do whatever
});
$el.dialog({
    open: function() {
        $el.trigger('customEvent');
    }
});

ただし、通常のイベントではサポートされない可能性のある他の機能を求めています。jQueryの特別なイベントの設定を検討する必要があります。ベンアルマンによるこの素晴らしい記事をチェックしてください。

前提条件となると：

  • event.stopPropagation()イベントは、その伝播がまたはで妨げられない限り、常にバブルすることができますevent.stopImmediatePropagation()
  • トリガーとリスナーはすでに同じ要素上にあります
  • リスナーは、それをトリガーした要素を識別し、それが祖先であるかどうかを確認できる引数を渡さない限り、何がトリガーされたかを知りません。

jsFiddleのテストケースを参照してください。

于 2012-12-16T14:09:24.287 に答える
1

渡すことができるセレクター.on()は、クリックイベントを処理できる要素と一致するようにデリゲートターゲットに使用されます（オブジェクトではなく文字列である必要があります）。

ただし、セレクターとデリゲートターゲットが同じであるため、これは必要ありません。したがって、これは期待どおりに機能するはずです。

$el.on('customEvent', function(evt) {
    //Do whatever
});

イベントが子孫から発生したかどうかを検出するにはevt.target、要素自体と比較します。

于 2012-12-16T14:10:24.380 に答える
1

.on正常に動作します; 祖先チェックを無視するにはe.target：

$el.on('customEvent', function(e) {
  if(e.target === this) {
    //Do whatever
  }
});
于 2012-12-16T14:14:13.093 に答える