1

jQuery の on() 関数を使用してコンテナー div にイベントをバインドし、".myItem" のセレクターを提供しています。

$container.on('click', '.myItem', { me: this }, MyClass.prototype.onItemClick);

「myItem」のクラスを持たない子要素がまだイベントを発生させているという事実を除いて、すべてがうまく機能しています。それは正しい振る舞いですか？セレクターが「myItem」とその子のクラスを持つ要素に一致することは?

<div class="myItem">
   <div>My Label</div>
</div>

私の実験から、<div>上記の両方がイベントを発生させます。私が望むのは、子divをクリックして、クラス名を持つ親divにバブルアップし、その要素のイベントが発生することです。つまり、イベント ハンドラー内では、event.target常に.myItem要素を参照する必要があります。

これは可能ですか？

4

3 に答える 3

2

「My Label」divをクリックしてイベントを発生させたいのですが、event.targetが「myItem」divになるようにバブルアップします。

このシナリオでmyItemは、 は になりませんevent.target。となりますevent.currentTarget。詳細については、私が提出した問題を参照してください。

于 2012-06-12T01:29:27.507 に答える
0

クリックでその機能を取得するには、子ノードでのクリック メソッドの伝播を停止して、それらが親にバブリングしないようにする必要があります。

$('.myItem *').on('click', function(evt) {
    event.stopPropagation();
});

実際の例- http://jsfiddle.net/tj_vantoll/J8jEe/

于 2012-06-12T01:19:41.207 に答える
0

子オブジェクトのクリックは親オブジェクトのクリックでもあるため、子のクリックを処理してイベントの伝播を停止しない限り、子のクリックは親のクリック ハンドラーをトリガーします。

ただし、委任されたイベント処理を使用する場合、イベントの伝播を停止するには制限があります。デリゲートされたイベント ハンドラーをアタッチしたコンテナーにイベントが既に伝達されるまで、イベント ハンドラーは起動しません。したがって、その時点でコンテナーの下にある要素を介した伝播を停止するには遅すぎます (伝播は既に発生しているため)。コンテナを超えて伝播を停止できます。

ラベルでのみクリックが発生するようにする場合は、次のようにすることができます。

$container.on('click', '.myItem label', function() {
    // your code here
});

これにより、委任されたイベント処理が使用され、クリックがラベル内のクリックのみに分離されます。

.myItemそのクリック ハンドラー内から親オブジェクトが必要な場合は、次のように取得できます。

$container.on('click', '.myItem label', function() {
    var item = $(this).closest('.myItem');
});
于 2012-06-12T01:20:15.823 に答える