javascript - 仅运行连接到用户上次单击的按钮的函数

Question

我的应用程序中有 3 个按钮，使用户能够根据用户单击的按钮向 map 添加不同的图标。我遇到的问题是，如果用户首先单击“button1”，然后单击“button2”，则当用户单击 map 时，这两个函数都会执行。我只想执行连接到用户上次单击的按钮的函数。这就是我编写以下代码的原因。我想知道为什么这段代码不起作用以及处理这个问题的最明智的方法是什么。

     var latestClick; //The variable to check which button the user clicked the last time

    On(button1, "click", function(evt){
        latestClick = "button1";
    });

    On(button2, "click", function(evt) {
        latestClick = "button2";
    });

    On(button3, "click", function(evt) {
        latestClick = "button3";
    });

        if(latestClick == "button1") {
            On(map, "click", function(evt){ 
                PictureMarkerSymbol = new PictureMarkerSymbol("images/info/info.png", 20, 20);
                mapPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint); 
                pointClick = new Graphic(new Point (evt.mapPoint), PictureMarkerSymbol);
                graphics.add(pointClick);
                name = prompt("Vad vill du ange för namn för denna punkt");
                info = prompt("Vänligen mata in information till punkten");
                url = prompt("Bifoga gärna en bild på informationspunkten");
                pointClick = pointClick.setInfoTemplate(new InfoTemp(name, info + "<br>" +  "<img src = " + url + ">"));
            });
        }

        else if(latestClick == "button2") {
            On(map, "click", function(evt){ 
                PictureMarkerSymbol = new PictureMarkerSymbol("images/rastplats/rastplats.png", 20, 20);
                mapPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint); 
                pointClick = new Graphic(new Point (evt.mapPoint), PictureMarkerSymbol);
                graphics.add(pointClick);
                name = prompt("Ange namn på rastplatsen");
                info = prompt("Ange information för rastplatsen");
                url = prompt("Bifoga en bild på rastplatsen");
                pointClick = pointClick.setInfoTemplate(new InfoTemp(name, info + "<br>" +  "<img src = " + url + ">"));
            });
        }

        else if(latestClick == "button3") {
            On(map, "click", function(evt){ 
                PictureMarkerSymbol = new PictureMarkerSymbol("images/matplats/matplats.png", 20, 20);
                mapPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint); 
                pointClick = new Graphic(new Point (evt.mapPoint), PictureMarkerSymbol);
                graphics.add(pointClick);
                name = prompt("Skriv namn på matplatsen");
                info = prompt("Ange information för matplatsen");
                url = prompt("Länka en bild på matplatsen");
                pointClick = pointClick.setInfoTemplate(new InfoTemp(name, info + "<br>" +  "<img src = " + url + ">"));
            });
        }

Answer 1

我同意威尔的观点。共享的代码未显示完整流程。看起来没有任何 map 事件被初始化，因为在单击其中一个按钮之前，latestClick 是未定义的。

假设您有一些逻辑可以在单击按钮后调用 map 事件初始化。看来您没有调用它一次，因此将创建多个 map 单击句柄。再次设置 map 点击事件之前，需要先销毁之前设置的句柄。像下面这样。

    var mapClickHandle;
    if(latestClick == "button1") {
        mapClickHandle && mapClickHandle.remove();
        mapClickHandle = On(map, "click", function(evt){ 
            PictureMarkerSymbol = new PictureMarkerSymbol("images/info/info.png", 20, 20);
            mapPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint); 
            pointClick = new Graphic(new Point (evt.mapPoint), PictureMarkerSymbol);
            graphics.add(pointClick);
            name = prompt("Vad vill du ange för namn för denna punkt");
            info = prompt("Vänligen mata in information till punkten");
            url = prompt("Bifoga gärna en bild på informationspunkten");
            pointClick = pointClick.setInfoTemplate(new InfoTemp(name, info + "<br>" +  "<img src = " + url + ">"));
        });
    }
    else if(latestClick == "button2") {
        mapClickHandle && mapClickHandle.remove();
        mapClickHandle = On(map, "click", function(evt){ 
            PictureMarkerSymbol = new PictureMarkerSymbol("images/rastplats/rastplats.png", 20, 20);
            mapPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint); 
            pointClick = new Graphic(new Point (evt.mapPoint), PictureMarkerSymbol);
            graphics.add(pointClick);
            name = prompt("Ange namn på rastplatsen");
            info = prompt("Ange information för rastplatsen");
            url = prompt("Bifoga en bild på rastplatsen");
            pointClick = pointClick.setInfoTemplate(new InfoTemp(name, info + "<br>" +  "<img src = " + url + ">"));
        });
    }
    else if(latestClick == "button3") {
        mapClickHandle && mapClickHandle.remove();
        mapClickHandle = On(map, "click", function(evt){ 
            PictureMarkerSymbol = new PictureMarkerSymbol("images/matplats/matplats.png", 20, 20);
            mapPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint); 
            pointClick = new Graphic(new Point (evt.mapPoint), PictureMarkerSymbol);
            graphics.add(pointClick);
            name = prompt("Skriv namn på matplatsen");
            info = prompt("Ange information för matplatsen");
            url = prompt("Länka en bild på matplatsen");
            pointClick = pointClick.setInfoTemplate(new InfoTemp(name, info + "<br>" +  "<img src = " + url + ">"));
        });
    }