当页面加载传单时触发多次moveend事件

moveend event fired many times when page is load with Leaflet

本文关键字：moveend 事件 单时触 加载      更新时间：2023-09-26

当地图被显示或缩放时，我需要做一些操作，所以我给事件moveend附加了一个回调。

map.on('moveend', function() {
    // code stuff
});

它工作得很好，但是当页面加载事件被触发三次，我不知道为什么。可能是因为在创建过程中，映射被移动了。

为了避免这种情况，我尝试在订阅moveend事件之前等待load事件，但没有改变。所以我试图将它附加在whenReady回调中，但是它再次被触发了三次。

map.whenReady(function() {
    map.on('moveend', function() {
        // code stuff
    });
});
最后，我发现在resize事件之后，它工作得很好:moveend只触发一次。但我真的相信有一个最好的方法来解决这个问题。

另一个解决方案是将我的回调函数附加到zoomend和dragend两个事件上，以覆盖平移和缩放情况。但是我没有找到一个方法去做。

谢谢你的帮助。

我发现最好的解决方案是将回调附加到两个事件:

    map.on('zoomend', function() {
        // callback
    });
    map.on('dragend', function() {
        // callback
    });

虽然这样代码有点重复，但这是目前最好的解决方案。

对于其他人来说，研究invalidateSize函数上的options.debounceMoveend选项。在文档中简要地提到了它，但不幸的是，它看起来只适用于该函数，而不是一般的moveend事件。

[…如果options.debounceMoveend是true，它将延迟moveend事件，这样即使连续多次调用该方法也不会经常发生。

引用源代码中的行(L3541)

可以使用mouseenter和mouseleave事件。例子:

block.addEventListener('mouseenter', ()=>{
    //some code when hover
})
block.addEventListener('mouseleave', ()=>{
    // some code when leaving block
})

链接到developer.mozilla.org

'zoomend'和'dragend'选项不适合我。我找了很多合适的选择，意识到"搬家"。事件触发几次，因为每次移动地图时都会创建此事件。因此，有必要停止此事件。我用这种方法摆脱了困境。在map初始化之后，我立即写入:

map.off('moveend');

对我来说很有效。现在它运行良好。如果这对别人有用，我会很高兴的。

相关文章：