onメソッドで複数のセレクタを拾ったときの個別処理。

Question

前提・実現したいこと

onメソッドで、複数のセレクタ(OR選択)の処理を書きたいのですが、
その中で特定のセレクタだけの個別処理を書くには、どうすればよいのでしょうか？
ご教示お願いいたします。

該当のソースコード

下記のように、処理内で>.list>div>aの個別処理を書きたいです。
if文で場合分けすれば実装できると思うのですが、
if文の()の中は、どのように書けばよいのでしょうか？

$("#myselect").on('click', ">.list>div>a, >.list>div>input", function(e) {
		if( /*.list>div>a だったら */){
			//list>div>aだけの処理。
		}
		//共通処理。
	});

まとめ

$("#myselect").on('click', ">.list>div>a, >.list>div>input", function(e) {
		if ($('#myselect>.list>div>a').is(this)) {
			//list>div>aがクリックされた時だけの個別処理。
		}
		if ($('#myselect>.list>div>input').is(this)) {
			//list>div>inputがクリックされた時だけの個別処理。
		}
		//共通処理。
	});

Answer 1

今回の場合要素名さえ取ればわかるのでそれで十分ですが、一般的には次のように書くことができます。

if ($('#myselect>.list>div>a').is(this)) {

Comments

[tkshp]

ご回答ありがとうございます。
共通処理が多かったので、まとめて書こうと思ってました。
ご教示いただいた方法でできました。
この書き方が一番わかりやすかったです。
ありがとうございます。

Answer 2

質問からはどのような html コードになっているか不明ですが・・・

複数の要素があって、どの要素から発生した click イベントなのかを識別して処理を分けたいということと理解してレスします。（理解が違っていたらどこがどう違うのか連絡ください）

イベントが発生すると event オブジェクトが生成され、その参照がイベントリスナの第一引数に渡されます。

event オブジェクトから、その target プロパティでイベントを発生させたオブジェクトを、eventPhase プロパティでフェーズ情報（キャプチャリング or バブリング）を取得できます。リスナ内での this はリスナをアタッチしたオブジェクトへの参照となります。

対象とする要素の一番外側の要素の click イベントにリスナをアタッチしておけば、上記のこととバブリング/キャプチャリングを利用して、どの要素から発生した click イベントなのかを識別することができると思います。

具体例は以下の記事を見てください。

キャプチャリングとバブリング
http://surferonwww.info/BlogEngine/post/2012/12/01/capturing-target-and-bubbling-phases.aspx

記事の中で「実験室」と書いたリンク先で実際に試すとこができますので、興味があればやってみてください。

Comments

[tkshp]

ご回答ありがとうございます。
勉強になりました。
ありがとうございます。

Answer 3

$(this) で実際にイベントが発生したエレメントが分かるので、そこから分岐できる情報を拾ってみてはいかがでしょうか。

もしそれだけで拾えないのでしたらIDをつけたりCLASSをつけたりHTML側で工夫するか、内容次第ですが、いっそのことその「特定の要素」だけ別のonで拾った方が見やすく・分かりやすくなるかもしれません。

Comments

[tkshp]

ご回答ありがとうございます。
勉強になりました。

Answer 4

ハンドラメソッド中で条件分岐するなら最初から分けて書いても良さそうですが、
まとめて書くとしたら
e.currentTargetでクリックされたHTMLElementが取れますので
今回のケースだとe.currentTarget.nodeNameとかで判断出来るかと思います。
タグ名とかも同じ場合はidやclassを付けておいたら判別可能です。

if( e.currentTarget.nodeName === 'A'){
  
}

Comments

[tkshp]

ご回答ありがとうございます。
共通処理が多かったので、まとめて書こうと思ってました。
ご教示いただいた方法でできました。
ありがとうございます。