Leaflet.js 和 Interact.js --- 避免触发两个点击侦听器

Question

我的页面有：

1)包含地图 (Leaflet.js) 和

的父级 div

2)包含可调整大小的矩形 (Interactive.js) 的子项 div，以便用户可以 select 一个区域。

矩形 "layer" 在地图 "layer" 上方。

html:

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

javascript（用于初始化传单地图）：

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()
(...)
}

但其中 none 有效。

有什么解决办法可以让用户调整矩形大小时地图不移动吗？

谢谢！

Answer 1

好的，我想通了..我post一个答案，以防有人遇到同样的问题：

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

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

...结合以下互动事件：

resizestart
resizeend

...给出解决方案：

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

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

Leaflet.js 和 Interact.js --- 避免触发两个点击侦听器

Leaflet.js with Interact.js --- avoid triggering both click listeners

javascript

leaflet

interact.js