Web系開発メモ

Java, C#, HTML, CSS, JavaScript のことなどを書いてます。

jQuery:アロー関数とthisの注意点

jQuery の イベントバインド(.on, .click, 等)で、アロー関数を渡すようにしたら、this を使っているところで不具合が発生しました。

これから、そのときに調べたことなどをまとめていきます。

function の場合

アロー関数を使う前は、次のように function を渡してました。

$('#list').on('click', 'a', function(e) {
  e.preventDefault();
  let $li = $(this).parent('li');
  ...

$(this) と書いたりして、クリックされた要素を操作できます。

アロー関数の場合

良い例

thise.currentTarget に置き換えると、上と同じように動作してくれます。

$('#list').on('click', 'a', (e) => {
  e.preventDefault();
  let $li = $(e.currentTarget).parent('li');
  ...

悪い例

アロー関数内で this を使うと動作が変わってしまいます。

$('#list').on('click', 'a', (e) => {
  e.preventDefault();
  let $li = $(this).parent('li');
  ...

アロー関数の this は、functionthis とは違うみたいです。

補足

thise.target にすると動きが変わる可能性があります。

$('#list').on('click', 'a', (e) => {
  e.preventDefault();
  let $li = $(e.target).parent('li');
  ...

e.targetthis と違うみたいで、a タグ以外の要素(例えば子要素)にも関数が実行されることがあります。

参考文献