javascript - 传单:使用弹出窗口时，点击事件并不总是被触发

Question

我有一个带有 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% 的情况下被触发。如果我取消弹出窗口，它就会工作。有可能解决问题吗？

Answer 1

一个常见的问题是您在鼠标悬停在 "mouseover" 事件位置时打开一个弹出窗口。在标记的情况下，这个位置是标记的坐标，这使得弹出覆盖整个标记，因此鼠标从标记中“取出”。

这里没有"mouseout" 监听器，所以您可能不会注意到这个效果。但是鼠标不再位于您的原始图层上(它现在位于您的弹出窗口上)，因此 “单击” 发生在弹出窗口上，而不是您的图层上。

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

演示:http://playground-leaflet.rhcloud.com/gusu/1/edit?html,output

2 种可能的解决方法是:

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

示例:http://playground-leaflet.rhcloud.com/zado/1/edit?html,output