javascript - 带Interact.js的Leaflet.js —避免同时触发两个点击监听器

我的页面有：

1）包含地图的父div（Leaflet.js）和

2）包含可调整大小的矩形（Interactive.js）的子div，以便用户可以选择一个区域。

矩形“图层”位于地图“图层”的顶部。

的HTML：

<div id="map">
    <div class="selectBox">
    </div>
</div>

javascript（用于初始化Leaflet地图）：

var map = L.map('map').setView([0,0], 6);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(map);

javascript（用于使用Interact.js初始化交互式框）

interact('.selectBox')
.resizable({
preserveAspectRatio: false,
edges: { left: true, right: true, bottom: true, top: true }
})
.on('resizemove', function (event) {
var target = event.target,
    x = (parseFloat(target.getAttribute('data-x')) || 0),
    y = (parseFloat(target.getAttribute('data-y')) || 0);

// update the element's style
target.style.width  = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';

target.style.webkitTransform = target.style.transform =
    'translate(' + x + 'px,' + y + 'px)';

target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.textContent = Math.round(event.rect.width) + '?' + Math.round(event.rect.height);
});

问题在于，当用户通过拖动交互式矩形的边框之一来调整其大小时，后面的地图也会移动。据我了解，这是因为Leaflet和Interact都捕获了onclick事件。

我试过了：

.on('resizemove', function (event) {
(...)
event.stopPropagation()
event.stopImmediatePropagation()
(...)
}

但他们都不起作用。

有什么解决方法，使用户调整矩形大小时地图不会移动？

谢谢！

最佳答案

好的，我想出了..我发布一个答案，以防有人遇到相同的问题：

以下Leaflet方法（我不知道它们的存在）：

map.dragging.disable()
map.dragging.enable()

...结合以下Interact事件：

resizestart
resizeend

...给出解决方案：

.on('resizestart', function (event) {
map.dragging.disable();
})

.on('resizeend', function (event) {
map.dragging.enable();
})