Leaflet.js ---トリガしないよう、両方のリスナー

Question

マイページがありクリック：

1）マップ（Leaflet.js）と

2を含む親のdiv）の子のdivサイズ変更可能な四角形（Interactive.js）が含まれているため、ユーザーは領域を選択できます。

矩形「層」は、マップ「層」の上にあります。

HTML：（リーフレットマップを初期化するための）

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

のjavascript：（Interact.jsと対話ボックスを初期化するための）

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

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

ジャバスクリプト

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

問題ユーザーがその境界の1つをドラッグしてインタラクティブ矩形のサイズを変更すると、マップの動作indも動きます。私が理解できるものから、これはリーフレットとインタラクトの両方がonclickイベントをキャッチするためです。

私が試した：

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

をそれらのどれも働きました。

ユーザーが矩形のサイズを変更したときに地図が移動しないようにするソリューションはありますか？

ありがとうございました！

Answer 1

OK、私は..私は、誰かが同じ問題を抱えている場合には、答えを投稿それを考え出した：（私は彼らのexistanceを知らなかったことを）

次リーフレット方法

：

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

溶液を得た...

resizestart 
resizeend 

：...次のインターアクトのイベントと組み合わせ

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

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