私の JavaScript コードで「removeEventListener()」が機能しないのはなぜですか?

JavaScript での EventListener の削除の問題:removeEventListener() が失敗する理由

JavaScript では、イベント リスナーにより、開発者はクリックやマウスの動きなどの DOM 要素イベントを監視できます。もっと。イベント リスナーをアタッチするのは非常に簡単ですが、削除すると問題が発生する場合があります。

コード

元のコードは、クリックされると area という名前の要素にイベント リスナーを追加します。

<code class="javascript">area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

問題

コードの後半でイベント リスナーを削除しようとすると、問題が発生します。

<code class="javascript">area.removeEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

ただし、イベント リスナーは接続されたままで、削除できません。

解決策

この問題の原因は、イベント リスナーのアタッチ方法にあります。異なる関数インスタンスごとに、個別のイベント リスナーが作成されます。この場合、リスナーの追加と削除に 2 つの匿名関数が使用されます。

問題を解決するには、削除に使用される関数参照がリスナーの追加に使用される関数参照と同一であることを確認してください。

<code class="javascript">function handleClickListener(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}

// Add event listener
area.addEventListener('click', handleClickListener, true);

// Remove event listener
area.removeEventListener('click', handleClickListener, true);</code>

両方の操作に同じ関数参照を使用することで、JavaScript は呼び出されたときにイベント リスナーを正しく削除できます。

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