叶片鼠标移出事件被调用于鼠标悬停事件

Question

我有一份传单地图，我正在动态添加标记。

我希望当我将鼠标悬停在标记上时，除了点击标记之外，也能调用弹出窗口。

我的代码是：

function makeMarker(){
   var Marker = L.marker...
   Marker.on('mouseover', function(){Marker.bindPopup('HI').openPopup();});

   Marker.on('mouseout', function(){Marker.closePopup();});
}

如果我注释掉mouseout这一行，那么弹出窗口会出现，但是我必须在其他地方单击才能关闭它。 问题在于当我加入mouseout时，光标悬停在标记上时会闪烁，什么也不显示。我认为弹出窗口正在打开，但是关闭得非常快，这就是为什么光标闪烁的原因，但我不知道如何解决这个问题。

- fifamaniac04

---

听起来你通过注释掉“mouseout”事件实现了你想要的行为。问题是什么？ - Daniel

抱歉，当我说它运行良好时，我写下了一些混乱的想法。我的意思是，在悬停时，弹出窗口显示正常，但然后我必须关闭它或单击地图中的其他位置，而不是将鼠标从标记上移开。问题是如何在鼠标悬停在标记上时继续显示弹出窗口，并在将鼠标从标记上移开时关闭它。 - fifamaniac04

Answer 1

我知道这是一个旧主题，但我刚遇到这个问题，我想我可以分享我的解决方案。我不是通过调整弹出窗口的偏移量来解决问题，而是使用CSS来防止弹出窗口窃取鼠标事件，方法是设置：

.my-popup {pointer-events: none;}

并将 my-popup 类名分配给弹出窗口：

Marker.on('mouseover', function () {Marker.bindPopup('HI', {className: 'my-popup'}).openPopup();})

希望这能帮助到某人 :)

- piotrsz

---

比移动弹出窗口更好的解决方案。 - lightningmanic

那非常优雅。 - Istopopoki

谢谢，这很棒。我发现这并不适用于弹出窗口的提示（即向下伸出的三角形）。添加.my-popup .leaflet-popup-tip {pointer-events: none;}可以将此方法扩展到弹出窗口的提示。 - Ryan

Answer 2

弹出窗口实际上是在光标下面加载，并“夺走”了鼠标，触发了Marker.mouseout()事件，导致弹出窗口关闭和重新触发Marker.mouseover()事件...循环继续，这就是为什么您会看到“闪烁”的原因。

我曾经看到过这种情况发生，具体取决于缩放级别(通常是在缩小到最小时)。

尝试在您的弹出选项中添加一个偏移量，以使其不影响：

function makeMarker(){
   var Marker = L.marker...
   Marker.on('mouseover', function(){Marker.bindPopup('HI', {'offset': L.point(0,-50)}).openPopup();});

   Marker.on('mouseout', function(){Marker.closePopup();});
}

- BlueWater86

---

这个很好地解决了。如果有人感兴趣，偏移量的默认值为（0,6）。http://leafletjs.com/reference.html#popup - austin

我可以确认这对我也有效。在经过许多尝试、错误和搜索后，我终于找到了。 - Mawg says reinstate Monica

Answer 3

我最近也再次遇到了这个问题。如果有人需要帮助的话： 从Leaflet 1.0开始，您可以使用L.Tooltip而不是在鼠标悬停或其他与鼠标相关的事件中使用弹出窗口。我发现它比制作弹出窗口更加流畅，并且使用的代码更少，特别是如果您只是在悬停时打开弹出窗口。在您的情况下，它可能看起来像：

function makeMarker(){
  var Marker = L.marker...
  Marker.bindTooltip('HI').openPopup();
}

如果您想保持它打开，可以使用permanent布尔标志。

在我的情况下，我不需要在单击时（除了悬停）弹出窗口，因此可能会更加复杂。但是L.Tooltip已经被广泛使用，并且有其他SO问题处理此问题。

- aqw