e.targetの扱いには注意しよう

  • 4
    いいね
  • 0
    コメント

Javascript(特にjQuery)でイベントハンドラとか、リスナを使うときに何も考えずにe.targetを使うとハマるよって話。
ES6が浸透して来て、アロー関数でリスナなどの関数を書く頻度が増えてきたことだと思います。
その関数内で、要素を取得してdata-id見たいな情報を取得したいなんてことはよくありますね。
そんなとき、以前はthisを使っていればよかったのですが、アロー関数ではthisはイベントの起こった要素を指さないのでイベントの関数の引数から頑張って持ってくる必要があります。

index.html
<!-- js側でdata-idが欲しい -->
<a data-id="10" class="link"><span class="bold">click here</span></a>
application.js
$(".link").click((e) => console.log($(e.target).data("id")));

多分こんな感じでコードを書くと思いますが、これは動きません。動かないというのは正しくなくて、条件次第で動かなくなります。
e.targetは文字通りクリックされた要素を指してしまうので、上の例の場合「click here」の部分をクリックしてしまうとe.targetは、<span>を指してしまいます。イベントの伝搬云々でe<a>targetにすると思ってしまいましたが、大元(<span>)がtargetになるようです。
こんなときにはcurrentTargetを使います。

application.js
$(".link").click((e) => console.log($(e.currentTarget).data("id")));//これなら常に<a>を取得できる