くりゅぴ!

サーバーやWEB問題解決のメモから生活お得情報まで。未分類のものは執筆中

JavaScriptアロー関数でthisが動かない

jqueryでよくやるこういった記述

$('.class').on('click',function(){
console.log(this);
});

これを最近っぽくアロー関数で書くとうまくthisでクリックしたデータが取れない

$('.class').on('click',() => {
console.log(this);
});

これは似ているようで実際は仕様が違うからである。
後者のthisはクリックしたもののデータではなく、全てのこの機能が付与されたものに対してのデータが取得されるらしい。
この場合は以下のようにする。

$('.class').on('click',(e) => {
const el = e.currentTarget;
console.log(el);
});

参考
https://ginpen.com/2017/12/03/arrow-funcitons/

WEB開発

タグ:

WEB開発の最新記事

2020年7月13日
印刷時改ページをする
2020年7月10日
PHPのJsを外部ドメインより呼び出す
2020年7月10日
ブラウザにキャッシュさせない

コメントを残す

メールアドレスが公開されることはありません。