addEventListener inside .on function in leaflet Angular

Question

I am new to programming and am currently building a small Angular app with leaflet. I have a bunch of markers who are all in markerClusterGroup. I built a custom contextmenu to execute when i right click any of the markers. When the contextmenu opens it has a few functions ( for example: show clicked marker coordinates, show clicked marker popup, make clicked marker draggable, etc.). The thing is, if I open the contextmenu and click a function to execute, it will do so only once. But the next time i do it, it will execute twice (every new click increments by 1). So for example, if I click a function to show an alert with the coordinates 4 times in a row, the 4th time alert is gonna execute 4 times. Can somebody tell me what I'am doing wrong? I am not good with event handling, so it's probably that. Code is below:

Component.ts:

this.markers123.on("contextmenu", function(event){
      var contextElement = document.getElementById("context-menu");
      var markerz=event;
      contextElement.style.top = markerz.offsetY + "px";
      contextElement.style.left= markerz.offsetX + "px";
      contextElement.draggable=true;
      contextElement.classList.add("active");
      var marker4;
      
      
     document.getElementById("showPopup").addEventListener("click", function(){
          event.layer.bindPopup(event.layer.latLng).openPopup();
          console.log(markerz.layer);
      });


      var showCoord= document.getElementById("showCoord");

    showCoord.addEventListener("click", function(){
        (<HTMLInputElement>document.getElementById("lat12")).value=markerz.latlng.lat; //latlng is written to an input field
        (<HTMLInputElement>document.getElementById("lon12")).value=markerz.latlng.lng;
      });

      var deleteMarker= document.getElementById("deleteMarker");

    deleteMarker.addEventListener("click", function(){
      markerz.layer.dragging.enable();
    });

      var saveMarker= document.getElementById("saveMarker");
    saveMarker.addEventListener("click", function(){
          
      
      event.layer.dragging.disable();
      alert("Lat- " +  (<HTMLInputElement>document.getElementById("lat12")).value + " Lng- " +  (<HTMLInputElement>document.getElementById("lon12")).value + " Lokacija: " +  (<HTMLInputElement>document.getElementById("naziv123")).value);
    });

    event.layer.off('click').on('move', function(a){
        marker4 = a;
        var position= marker4.latlng;
        (<HTMLInputElement>document.getElementById("lat12")).value=marker4.latlng.lat;
        (<HTMLInputElement>document.getElementById("lon12")).value=marker4.latlng.lng;
        
        });

    });
    window.addEventListener("click",function(){
      document.getElementById("context-menu").classList.remove("active");

contextmenu in html:

<div id="context-menu">
        <div id="showPopup" class="item">
          <i class="fa fa-cut"></i> Show popup
        </div>
        <div id="showCoord" class="item">
          <i class="fa fa-clone"></i> Show coord
        </div>
        <div class="item" id="deleteMarker">
          <i class="fa fa-refresh"></i> Modify
        </div>
        <div class="item" id="saveMarker">
          <i class="fa fa-times"></i> End modify
        </div>
      </div>

Have you tried using a click event binding instead of adding via JavaScript? Angular has tools to make your life easier here https://angular.io/guide/event-binding — Peter David Carter, Feb 04 '21 at 10:06
yes, or so I think, but the problem is that I found that when I click on a function in the contextmenu, it doesnt forward the clicked marker event, but the clicked function event. I don't know how to forward the rightClicked marker event to a clicked function in the contextmenu. — OmarLittle, Feb 04 '21 at 10:34

score 1 · Accepted Answer · answered Feb 04 '21 at 10:08

This is because every time you open the contextmenu you add a new listener to the object / html elements and then the listeners are stacked.

You can prevent this when you remove the old / existing listeners. Look into this answer How to remove event listeners

addEventListener inside .on function in leaflet Angular

1 Answers1