我有一个带有 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"
监听器,所以您可能不会注意到这个效果。但是鼠标不再位于您的原始图层上(它现在位于您的弹出窗口上),因此 “单击”
发生在弹出窗口上,而不是您的图层上。
有时它可能仍然有效,如果您不小心将鼠标稍微移回图层上方,并且尚未插入新的弹出窗口(无论出于何种原因)
演示:http://playground-leaflet.rhcloud.com/gusu/1/edit?html,output
2 种可能的解决方法是:
- 将弹出窗口绑定(bind)到您的原始图层,而不是在 map 上“鼠标悬停”的确切位置打开它。这样,它就会在标记上方打开,或以路径为中心打开。
- 使用Tooltip而不是弹出窗口,它更适合“鼠标悬停”效果。
示例:http://playground-leaflet.rhcloud.com/zado/1/edit?html,output
关于javascript - 传单:使用弹出窗口时,点击事件并不总是被触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42320076/