javascript - 传单Angular中的.on函数内的addEventListener

问题描述

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

组件.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>

标签： javascripthtmlangularleaflet

javascript - 传单Angular中的.on函数内的addEventListener

问题描述

解决方案

推荐阅读