javascript removeEventListenerが効かない場合
- 作成日 2022.07.12
- javascript
- javascript
javascriptで、removeEventListenerが効かない場合の対処法を記述してます。
環境
- OS windows11 home
- Apache 2.4.43
- ブラウザ chrome 103.0.5060.114
removeEventListenerが効かない
以下のコードで発生。
function foo(e){ console.log('foo') }
window.onload = function(){
btn1.addEventListener('click', foo, true);
}
function hoge(){
btn1.removeEventListener('click', foo, false)
}
原因
第3引数である「useCapture」の値が「true」と「false」になっていて、異なるため
対処法
同じにする必要があります。
function foo(e){ console.log('foo') }
window.onload = function(){
btn1.addEventListener('click', foo, true);
}
function hoge(){
btn1.removeEventListener('click', foo, true)
}
また無名関数やアロー関数だと、関数が指定できないため「removeEventListener」が効きません。
無名関数
window.onload = function(){
btn1.addEventListener('click', function(e){console.log('foo')});
}
function hoge(){
btn1.removeEventListener('click', function(e){console.log('foo')})
}
アロー関数
window.onload = () =>{
btn1.addEventListener('click', (e) => { console.log('hoge') });
}
const hoge = () =>{
btn1.removeEventListener('click', (e) => { console.log('hoge') })
}
-
前の記事
WordPress6.0 管理画面が真っ白になりログインできない 2022.07.12
-
次の記事
VSCODE javaを実行する 2022.07.12
コメントを書く