时间戳

首页 > 解决方案 > 循环内的项目的单击事件触发两次

javascript - 循环内的项目的单击事件触发两次

问题描述

所以问题是我有leafletjs地图，使用从fetch 中获得的一些数据，我向地图添加了新的标记。有一个循环遍历数据，它为“destination from”和“destination to”创建并放置一个新标记。

问题是在单击其中一个标记后，事件会触发两次。例如，我尝试使用一个变量来保存最后一次点击时间并将其与新的比较，但它不能解决问题。当我更改循环使其仅添加 1 个标记时，事件仍会触发两次。你能看出可能是什么原因吗？

另一个额外的问题（如果有人可以看到为什么会发生这种情况）是在单击一个标记（从/到）（事件触发两次）并单击任何其他标记（不属于先前单击的对）之后，我在package.addressFrom上得到未定义的错误

function prepare(data)
{
    for(var i=0; i < data.length; ++i)
    {
        var markeFrom = L.marker([data[i].latFrom, data[i].lngFrom], {myCustomClass: data[i].id}).addTo(myMapAll).on('click', markerClicked);
        var markerTo = L.marker([data[i].latTo, data[i].lngTo], {myCustomClass: data[i].id}).addTo(myMapAll).on('click', markerClicked);
        
        packageInfo["id"] = data[i].id;
        packageInfo["addressFrom"] = data[i].destinationFrom;
        packageInfo["addressTo"] = data[i].destinationTo;
        packageInfo["recipient"] = data[i].recipient;
        packageMapInfoArr.push(packageInfo);
    }
}

function markerClicked() 
{
    var clickedMarkerId = this.options.myCustomClass;
    var package = packageMapInfoArr.find(x => x.id === clickedMarkerId);
    
    alert('From:' + package.addressFrom + '\n' +
            'To:' + package.addressTo + '\n' +
            'Recipient:' + package.recipient);
}

在此处输入图像描述

标签： javascriptleaflet

解决方案

这些屏幕截图似乎来自 Safari 网络浏览器，因此您很可能遇到了已知的 Leaflet issue #7255。使用任何其他网络浏览器都应该澄清是否是这种情况。

在撰写本文时，此错误尚无干净的解决方案，但当前的解决方法是禁用tap处理程序（通过初始化实例时的tap选项）L.Map

推荐阅读