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