Leaflet Mouseout调用了MouseOver事件

Question

我有一张传单地图,我正在动态添加标记.

当我将鼠标悬停在标记上时,除了单击标记之外,我想将弹出窗口称为标记.

我的代码是:

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

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

如果我注释掉鼠标输出行,则会出现弹出窗口,但是我必须单击elswhere才能关闭它.问题是当我放入鼠标时,当光标悬停在标记上并且没有任何显示时,光标有点闪烁.我认为弹出窗口是开放的,但后来关闭非常快,这就是为什么光标闪烁但我不知道如何解决这个问题

Answer 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();});
}

Answer 2

我知道这是一个老线程,但我刚刚遇到这个问题,我认为我可以分享我的解决方案.而不是抵消弹出窗口,我通过设置阻止弹出窗口使用CSS窃取鼠标事件:

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

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

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

我希望这可以帮助别人 :)