在 MouseOver 事件上调用 Leaflet Mouseout答案

【问题标题】：Leaflet Mouseout called on MouseOver event在 MouseOver 事件上调用 Leaflet Mouseout
【发布时间】：2013-11-20 23:27:19
【问题描述】：

我有一张传单地图，我在其中动态添加标记。

当我将鼠标悬停在标记上时以及单击标记时，我想调用它的弹出窗口。

我的代码是：

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

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

如果我注释掉 mouseout 行，则会出现弹出窗口，但我必须单击 elswhere 将其关闭。问题是当我将鼠标移出时，光标在光标悬停在标记上时有点闪烁，没有任何显示。我认为弹出窗口正在打开但关闭速度非常快，这就是光标闪烁的原因，但我不知道如何解决这个问题

【问题讨论】：

通过注释掉“mouseout”事件，听起来你有你想要的行为。有什么问题？
对不起，当我说它工作正常时，我写下了一些想法。我的意思是说，在悬停时，弹出窗口显示正常，但是我必须关闭它或单击地图中的其他位置，而不是将鼠标从标记上移开。问题是当鼠标悬停在标记上时如何继续显示弹出窗口以及当我从标记上移开鼠标时如何关闭它

标签： javascript jquery css popup leaflet

【解决方案1】：

弹出窗口实际上是在光标下方加载并从标记中“窃取”鼠标，触发 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();});
}

【讨论】：

这很好用。如果有人感兴趣，默认偏移量是 (0, 6)。 leafletjs.com/reference.html#popup
我可以确认这也适用于我。经过多次尝试、错误和搜索，我们很感激地找到了

【解决方案2】：

我知道这是一个旧线程，但我刚刚遇到了这个问题，我想我可以分享我的解决方案。我没有抵消弹出窗口，而是通过设置防止弹出窗口使用 CSS 窃取鼠标事件：

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

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

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

我希望这对某人有帮助:)

【讨论】：

比移动弹出窗口更好的解决方案。
这很优雅

【解决方案3】：

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

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

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

在我的情况下，我不需要在点击时打开弹出窗口（除了悬停），所以这可能会更复杂一些。然而，L.Tooltip 已被广泛使用，还有其他一些 SO 问题可以解决这个问题。

【讨论】：