web-dev-qa-db-ja.com

'e.target'をjQueryオブジェクトと比較する

私がやりたいこと：

( clickedObject === someDiv ) //returns true or false

私が試したもの

( $(e.target) === $('.selector') ); //returns a false negative.

私の回避策

( $(e.target).attr('class') === $('.selector').attr('class') ); //works as intended, not so clean though.

クリックしたオブジェクトをDOM内のオブジェクトと比較する正しい方法は何ですか？

javascriptjqueryclickjquery-events
36
dubbelj

e.targetには、hasClass関数を使用できるこのクラスがあります。

if ($(e.target).hasClass("selector"))

または、本当にオブジェクトを比較したい場合は、jQueryセレクターが項目のコレクションを返すことに注意してください。

if (e.target === $('.selector')[0])
40
Adam Rackis

あなたは近いです。代わりに .is() を使用してください：

_if($(e.target).is('.selector')) {
    // Your code
}
_

ここでの秘訣は、jQueryオブジェクトに_e.target_をラップして、便利なjQueryメソッドすべてにアクセスできるようにすることです。

_e.target_に特定のクラスがあるかどうかだけを確認している場合は、.hasClass()の代わりに .is() を使用してみてください。

_if($(e.target).hasClass('selector')) {
    // Your code
}
_

どちらの方法でも機能しますが、.hasClass()はコードの動作が少し明確であり、.is()を使用するよりも高速です

33
Bojangles

明らかに、ここでは.is()関数を使用するのが最善の解決策です。

このような比較を行っている場合は、次のような埋め込みjQueryメカニズムを使用できるかどうかを確認してください。

_$(element).on("click", ".selector", function() {
    alert("clicked");
});
_

.on()メソッドの2番目の引数はターゲットセレクターです。この構成を使用する場合（詳細： http://api.jquery.com/on/#direct-and-delegated-events ）、追加の比較を行う必要はありません。

https://jsfiddle.net/m5zysufy/

0
luke

イベントが関連付けられている要素を一致させる場合は、$(this)を使用できます。または、イベントをトリガーした要素を検索する場合は、$(event.target)を使用します。

以下は、これらの両方の例です。

http://jsfiddle.net/Phunky/TbJef/

イベントの委任を使用しているのでない限り、これらは同じですが、同じ要素がある場合でも同じです。

0
Phunky