Website-Suche

javascript - Wie entfernt man removeEventListener in addEventListener?

Ich hatte einen addEventListener, der je nach Anzahl der Klicks mehrfach ausgelöst wurde. Wie kann ich sicherstellen, dass er nur einmal ausgeführt wird? Ich habe versucht, removeEventListener zu verwenden, aber er wurde überhaupt nicht ausgeführt.

Jegliche Hilfe und Vorschläge werden geschätzt. Danke im Voraus :)

Provider.ts

addInfoWindow(marker,ListingID){

this.http.get(this.baseURI + '/infoWindow.php?id=' + ListingID)
  .map(res => res.json())
  .subscribe(Idata => {

    let infoData = Idata;

      let content = "<ion-item>" + 
     "<h2 style='color:red;'>" + infoData['0'].ListingTitle + "</h2>" + 
     "<p>" + infoData['0'].ListingDatePosted + ' ' + infoData['0'].ListingStartTime + "</p>" +
     "<p> Salary: $" + infoData['0'].ListingSalary + "</p>" +
     '<p id="' + infoData['0'].ListingID + '">Apply</p>'
     "</ion-item>";    

  console.log("CREATING INFOWINDOW WITH CONTENT");
 let infoWindow = new google.maps.InfoWindow({

 content: content

 });

  google.maps.event.addListener(infoWindow, 'domready', () => { 

  let goInfoPage = document.getElementById(infoData['0'].ListingID);

    console.log("GETTING PAGE ID");

    //let it run only once, currently will increment by 1 if infoWindow if closed and reopen
  goInfoPage.addEventListener('click', () => {

    let pushData = infoData['0'];

    console.log("GETTING PAGE DATA");

    let nav = this.app.getActiveNav();

    console.log("PUSHHING TO PAGE");

    nav.push('StoreInfoPage',{'record':pushData});

  }) 

 goInfoPage.removeEventListener('click', () => {      
  console.log("REMOVE EVENT LISTENER"); // did not run
  });

 });


google.maps.event.addListener(marker, 'click', () => {
console.log("MARKER CLICKED, OPENING INFOWINDOW");
infoWindow.open(this.map, marker); 

  });


 });

}

Antwort #1

removeEventListener akzeptiert eine Funktion, die zuvor als Listener mit addEventListener hinzugefügt wurde, nicht einen Callback. Aus diesem Grund ist es nicht praktikabel, anonyme Funktionen als Listener zu verwenden - sie können nicht entfernt werden.

Dies ist allgemeines JavaScript-Wissen, das nicht spezifisch für Angular ist:

const onClick = () => {
  ...
  goInfoPage.removeEventListener('click', onClick);
});

goInfoPage.addEventListener('click', onClick);

Angular-Anwendungen verlassen sich konventionell auf RxJS, es kann:

import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/first';

...
Observable.fromEvent(goInfoPage, 'click').first().subscribe(() => {
  ...
});

Die Entfernung von Listenern wird von RxJS übernommen.

Antwort #2

Sie müssen die Funktion an removeEventListener wie folgt übergeben:

let div = document.getElementById("myDiv");

let coolFunction = () => {
    console.log("Hello World");
    div.removeEventListener("click", coolFunction);
}

div.addEventListener("click", coolFunction);

Verwandte Artikel