【问题标题】:Why doesn't Leaflet provide the correct relatedTarget element on mouseout event?为什么 Leaflet 没有在 mouseout 事件中提供正确的 relatedTarget 元素?
【发布时间】:2017-08-21 19:26:57
【问题描述】:

当用户将鼠标悬停在标记上时,我会打开一个弹出窗口。目前,当用户将鼠标悬停在弹出窗口上时它会关闭(例如,用户无法选择弹出窗口内的文本,因为它会关闭)。我正在尝试解决这个问题,我找到了一个很好的方法,你可以在这里看到:
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 相同的解决方案中,90% 的情况下relatedTarget不是弹出窗口,即使您一直退出弹出窗口也是如此。这个百分比是任意的,我实际上并没有计算它,我的意思是如果你尝试足够长的时间,最终新的解决方案会将弹出窗口记录为relatedTarget,但这非常罕见。

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

感谢您的帮助!

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

【问题讨论】:

    标签: javascript leaflet


    【解决方案1】:

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

    在 Leaflet 的 GitHub 上查看此问题以获取更多信息:https://github.com/Leaflet/Leaflet/issues/5720

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-01-04
      • 1970-01-01
      • 1970-01-01
      • 2013-01-13
      • 2011-12-10
      • 1970-01-01
      • 2010-10-30
      相关资源
      最近更新 更多