0
我的頁面有:Leaflet.js與Interact.js ---避免同時觸發點擊聽衆
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()
(...)
}
,但沒有一次成功。
是否有解決方案,以便在用戶調整矩形大小時地圖不會移動?
謝謝!