为什么Leaflet不会在mouseout事件中提供正确的relatedTarget元素?

时间:2017-08-18 11:50:37

标签: javascript leaflet

当用户将鼠标悬停在标记上时,我会打开一个弹出窗口。当前,弹出窗口在用户将鼠标悬停在其上时关闭(例如,用户无法在弹出窗口内选择文本,因为它关闭)。我试图解决这个问题,我发现了一个很好的方法,你可以在这里看到:
http://jsfiddle.net/sowelie/3JbNY/

虽然该解决方案有效,但它在该小提琴中使用的Leaflet版本非常陈旧,因此我将Leaflet的版本更新为1.1.0版本,并且90%的时间都解决了该解决方案。

这是两个小提琴,第一个与旧Leaflet的工作解决方案相同,但我添加了一个console.log。第二个也有console.log,但它使用Leaflet 1.1.0 旧的:http://jsfiddle.net/3JbNY/106/
新的:http://jsfiddle.net/3JbNY/105/

请注意,100%的时间,旧解决方案始终记录正确的relatedTarget元素,这是弹出窗口(当然,当您从标记退出到弹出窗口时。如果您从标记退出到地图,它不会是弹出窗口)。

然而,在使用新版Leaflet的同一解决方案中,即使您退出弹出窗口,relatedTarget 弹出窗口的90%的时间时间。这个百分比是任意的,我没有实际计算它,我的意思是如果你尝试的时间足够长,最终新解决方案会将弹出窗口记录为relatedTarget,但这种情况非常罕见。

我想知道这里的正确行为是什么。在我看来,它应该像旧的解决方案一样工作:给我正确的元素,我可以退出,这样我可以检查我是否退出弹出窗口,如果那个'是这样的。为什么会改变?
是否有任何解决方法可以获得正确的relatedTarget而不依赖于Leaflet团队修补此问题?或者也许是一个不依赖relatedTarget的全新解决方案?

我很感激帮助!

编辑:标题说mouseover,但我的意思是mouseout

1 个答案:

答案 0 :(得分:0)

找到了罪魁祸首。一些Leaflet类有一个名为pointer-events的CSS属性设置为none,请查看它的作用here。因此,弹出窗口上的事件被忽略了。所以我通过简单地将属性覆盖到auto值来解决这个问题(在我的例子中它是leaflet-tooltip类,但它们有一个类似于弹出窗口leaflet-popup-tip-container)的类。

有关详情,请查看Leaflet的GitHub上的此问题:https://github.com/Leaflet/Leaflet/issues/5720