更改 iconUrl 时未触发 mouseout 事件的传单

Question

我遇到传单及其活动的问题mouseout。

在下面的代码中，有时（特别是快速移动鼠标时），不会触发 mouseout 事件。不会Mouse out !出现在控制台中。

我发现这个行为与图标替换有关。layer.setStyle每次都很简单。（这里我使用leaflet-gpx插件，但它的工作方式与leaflet 的 IconUrl 或 ShadowUrl相同）

// This works every time
gpxPath.on('mouseover', function (e) {
    var layer = e.target;
    layer.options.marker_options.startIconUrl = 'myHoverIconStartUrl';
    layer.options.marker_options.endIconUrl = 'myHoverIconEndUrl';
    layer.reload();
});

gpxPath.on('mouseout', function (e) {
    console.log('Mouse out !')
    var layer = e.target;
    /* those two lines below cause the issue */
    layer.options.marker_options.startIconUrl = '';
    layer.options.marker_options.endIconUrl = '';
    layer.reload();
});

我知道 mouseout 事件有时会导致这样的问题，但在这种特殊情况下，我被迫使用传单事件，而且我有点没有想法。

Answer 1

您是否试图使标记在悬停时显示不同的图标？

没有例子很难说，但我认为正在发生的是：

您的mouseout事件无法可靠地触发，因为mouseover只要您的鼠标位于事件上，每次图标重建时，事件就会连续运行。

console.log如果您也在该函数中添加 a ，您可能会注意到这一点。您可能会在重建时碰巧离开，因此无法mouseout可靠地触发该事件。

如果是这样，请尝试以下操作：

line.once('mouseover', function () {
    //switch to icons

});

line.on('mouseout', function () {
    //clear icons
    
    //Prevent mouseover event from firing continuously if/when the icon changes
    line.once('mouseover', function () {
        //switch to icons
    });
});