Leaflet.js与Interact.js ---避免同时触发点击听众

Question

我的页面有：

1），其中包含一个地图（Leaflet.js）和

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

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

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); 
}); 

问题当用户通过拖动其中一个边界来调整交互矩形的大小时，地图beh ind也移动。据我所知，这是因为Leaflet和Interact都能捕获onclick事件。

我想：

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

，但没有一次成功。

是否有解决方案，以便在用户调整矩形大小时地图不会移动？

谢谢！

Answer 1

OK，我想通了..我张贴的答案，万一有人有同样的问题：

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

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

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

resizestart 
resizeend 

...给出解决方案：

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

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