Javascript 传单：使用弹出窗口时不总是触发单击事件

我有一个带有onclick处理程序的层：

countriesLayer = L.geoJson(ct, {
    style: myStyle,
    onEachFeature: onEachFeature
})

function onEachFeature(feature, layer) {
    var center = setLabelCenter(layer);
    feature.center = [center.lng, center.lat];
    layer.on({
        click: onFeatureClick,
        mouseover: showMapTip,
    });
}

我还有一个鼠标悬停的弹出窗口：

function showMapTip(e) {
    var layer = e.target;
    var content = getInfoContent(layer.feature.properties);
    layerPopup = L.popup({
        autoPan: false
    }).setLatLng(e.latlng).setContent(content).openOn(mymap)
}

问题是onClick事件并不总是被激发。更确切地说，大约有10%的情况下发射。如果我取消弹出窗口，它就会工作。

---

有可能解决此问题吗？

一个常见问题是，您在

“mouseover”

事件位置的鼠标上方打开一个弹出窗口。在标记的情况下，该位置是标记的坐标，这使得弹出窗口覆盖整个标记，因此鼠标从标记中“取出”

这里没有

“mouseout”

侦听器，因此您可能不会注意到这种效果。但鼠标不再位于原始图层上（现在位于弹出窗口上），因此，

“单击”

发生在弹出窗口上，而不是在您的图层上

有时，如果您不小心将鼠标移回图层上方，并且尚未插入新的弹出窗口（无论出于何种原因），该功能可能仍然有效

演示：

两种可能的解决办法是：

• 将弹出窗口绑定到原始图层上，而不是在地图上的“鼠标悬停”确切位置打开它。这样，它将在标记上方打开，或以路径为中心
• 使用一个而不是一个弹出窗口，这是更适合“鼠标悬停”的效果

---

示例：

非常感谢您的回答。你给了我一个正确的方向。我不能完全按照您的建议使用工具提示，因为我的工具提示不是静态的，它们会根据用户的输入进行更改。我还了解到，我使用的不是不包含bindTooltip的最新版本的传单.js。升级到最新版本要求对代码的某些地方进行更改，我将在稍后执行这些更改。目前，我将弹出窗口的位置改为每个特征的中心，这样用户就可以单击位于中心某个距离的点上的特征。我知道这不是理想的解决方案，也许我以后会改变它。