JavaScript のremoveEventListener が機能しないのはなぜですか?

JavaScript のremoveEventListener が動作しない

JavaScript で要素にイベント リスナーを追加および削除しようとすると、removeEventListener 関数が期待どおりに動作しない場合があります。この問題は、removeEventListener の 2 番目の引数として指定された匿名関数が、addEventListener に最初に割り当てられた関数参照と異なる場合に発生します。

問題の理解

提供されたコードでは、イベント リスナーは匿名関数を使用して接続および削除されます:

area.addEventListener('click', function(event) { ... }, true);
area.removeEventListener('click', function(event) { ... }, true);

ただし、これらの匿名関数は完全に異なるオブジェクトです。同じタスクを実行する場合でも、それらは同じ参照ではありません。

解決策

イベント リスナーを正しく削除するには、同じ関数参照を提供する必要があります。リスナーを追加するために使用されました。 addEventListener の外側で名前付き関数を定義し、removeEventListener 呼び出しを行います。

function foo(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}
area.addEventListener('click', foo, true);
area.removeEventListener('click', foo, true);

これを実行すると、removeEventListener 関数は最初にアタッチされた関数参照を認識し、イベント リスナーを正常にデタッチします。

以上がJavaScript のremoveEventListener が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。