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

Question

我遇到了传单问题，这是 mouseout 事件。

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

我发现此行为与图标替换有关。一个简单的 layer.setStyle 每次都有效。（这里我用的是leaflet-gpx plugin but it works the same way as leaflet's IconUrl or 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 事件有时会导致这样的问题，但在这种特殊情况下，我不得不使用 leaflet 事件，我有点不知所措。

Answer 1

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

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

您的 mouseout 事件没有可靠地触发，因为 mouseover 事件是运行连续的，只要您的鼠标放在它上面，每次图标重建。

如果您也在该函数中添加 console.log，您可能会注意到这一点。你可能会在它重建时碰巧离开，所以你不会可靠地触发 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
    });
});

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

Leaflet on mouseout event not firing when changing iconUrl

javascript

jquery

mouseout

leaflet