Mengapa JavaScript removeEventListener() saya tidak berfungsi?

Javascript removeEventListener tidak berfungsi

Dalam kod ini, pendengar acara ditambahkan pada elemen menggunakan kaedah addEventListener():

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

Kemudian, dalam fungsi lain, pendengar acara cuba dialih keluar menggunakan kaedah removeEventListener():

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

Walau bagaimanapun, pendengar acara tidak dialih keluar. Mengapa ini berlaku?

Masalahnya:
Isunya terletak pada fakta bahawa dua fungsi tanpa nama diluluskan sebagai hujah kepada kaedah addEventListener() dan removeEventListener() ialah dua fungsi berbeza. Apabila pendengar acara ditambah dengan kod berikut:

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

Waktu jalan mencipta objek fungsi tanpa nama baharu yang unik dan memberikannya kepada pengendali acara klik bagi elemen kawasan.

Apabila pendengar acara dialih keluar dengan kod berikut:

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

A berbeza objek fungsi tanpa nama unik yang baharu dicipta dan diberikan kepada pengendali acara klik bagi elemen kawasan. Fungsi pertama tidak dialih keluar, jadi ia terus mengendalikan acara klik.

Penyelesaian:
Untuk mengalih keluar pendengar acara dengan betul, perlu menyediakan kaedah removeEventListener() dengan rujukan kepada objek fungsi yang sama yang dihantar ke kaedah addEventListener(). Untuk melakukan ini, pendengar acara harus ditakrifkan sebagai fungsi bernama, dan kemudian fungsi bernama harus digunakan sebagai hujah untuk kedua-dua kaedah addEventListener() dan removeEventListener(). Contohnya:

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

Atas ialah kandungan terperinci Mengapa JavaScript removeEventListener() saya tidak berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!