どれだけ技術が発展しても、いまだに足を引っ張り続ける問題児、IE11。
なんと2021年現在、そのシェアは国内で第4位なんだとか。
そんなIE11に今回も悩まされました。
起こったこと
for (let i = 0; i < domlist.length; i++) {
domlist[i].addEventListener('clicl', function() {
console.log(domlist[i]); // <- クリックした要素が表示される
});
}
こんな感じで、取得した要素を一つずつ取り出して、
addEventListenerでイベントを設定する、なんてことをよくすると思います。
この場合、要素をクリックすると、クリックした要素が表示されるはずです。
しかし、IE11ではそうはいきませんでした。
クリックするとなぜか、undefinedが表示されてしまうのです！
解決方法
解決方法はシンプルで、domlist[i]を一度変数に代入するだけでOK。
どうやらIE11だと「i」の値が、
なぜか「domlist.length」の値になってしまうらしく、
そりゃあ取得できないわけです。
for (let i = 0; i < domlist.length; i++) {
let dom = domlist[i]; // <- 代入
dom.addEventListener('clicl', function() {
console.log(i); // <- 試しにiを出力すると、domlist.lengthの値になっている
console.log(dom); // <- クリックした要素が表示される
});
}
しかし、リストから要素を取得できるようになっても、
根本の「i」は間違った値のままなので、
イベント内で「i」を使う場合には注意が必要です。
