传单中 .on 函数中的 addEventListener Angular

Question

我是编程新手，目前正在使用传单构建一个小型 Angular 应用程序。我有一堆标记，它们都在 markerClusterGroup 中。当我右键单击任何标记时，我构建了一个自定义上下文菜单来执行。当上下文菜单打开时，它有一些功能（例如：显示点击的标记坐标、显示点击的标记弹出窗口、使点击的标记可拖动等）。问题是，如果我打开上下文菜单并单击要执行的函数，它只会执行一次。但下次我这样做时，它将执行两次（每次新的点击都会增加 1）。因此，例如，如果我连续 4 次单击一个函数以显示带有坐标的警报，则第 4 次警报将执行 4 次。有人可以告诉我我做错了什么吗？我不擅长事件处理，所以可能就是这样。代码如下：

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");

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>

Answer 1

这是因为每次打开上下文菜单时，都会向对象/html 元素添加一个新的侦听器，然后将这些侦听器堆叠起来。

您可以在删除旧的/现有的侦听器时避免这种情况。查看此答案 How to remove event listeners

传单中 .on 函数中的 addEventListener Angular

addEventListener inside .on function in leaflet Angular

html

javascript

leaflet

angular