NEW ARTICLE
kotlin 「if」文を使用する
  1. HOME
  2. javascript
  3. javascript removeEventListenerが効かない場合

javascript removeEventListenerが効かない場合

javascript removeEventListenerが効かない場合

javascriptで、removeEventListenerが効かない場合の対処法を記述してます。

目次

環境

  • OS windows11 home
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.114
Javascript サンプル集はこちら

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') })
}