私たちのプロジェクトの1つでは、Leaflet
と_Leaflet.markercluster
_プラグインを使用しています。 Leaflet
のソースを調べると、マップのclick
イベントに_collapse()
関数が追加されていることがわかりました。そのため、マップをクリックするたびに、以前に展開されたクラスターが縮小されます。
ここで、この動作を無効にします。クラスターが展開されている場合は、click
イベントですべてのマーカーの選択を解除したいだけです(クラスター自体を縮小しないでください)。これが私のコードの一部です:
_map.on('click', function(e) {
scope.deselectAllMarkers();
});
_
click
イベントの伝播を停止するために、この1行のコールバックの最後に次の行を追加しようとしました。
scope.L.DomEvent.stopPropagation(e);
scope.L.DomEvent.preventDefault(e);
scope.L.DomEvent.stop(e);
scope.L.DomEvent.stopPropagation(e.originalEvent);
scope.L.DomEvent.preventDefault(e.originalEvent);
scope.L.DomEvent.stop(e.originalEvent);
そして、それらのどれも機能しません。 Leaflet
ソース内に隠されているデフォルトのリスナーは、マップをクリックするたびにその呼び出しを保持します。私は何かが足りないのですか?
私はこの答えがかなり遅いことを知っています、しかし誰かが解決策に興味があるなら、これが私がそれを解決した方法です。
以下のこのスニペットは、関数をclick
イベントにバインドする例です。
map.on('click', doSomething);
実際、 leafletのAPI といくつかのオタクなデバッグをチェックした後、イベントはイベント自体ではなくオブジェクトを返すようです。イベント自体は、返されたオブジェクト内のフィールドにラップされます。
var doSomething = function(map) {
// stop propagation
map.originalEvent.preventDefault();
};
上記のスニペットを使用すると、イベントのバブリングが停止しました。これは私が望んでいたことであり、おそらくあなたが望んでいたことです。
これは私のために働いた...
var div = L.DomUtil.get('div_id');
if (!L.Browser.touch) {
L.DomEvent.disableClickPropagation(div);
L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}
あなたはこのように使用しています event.stopPropagation()
_map.on('click', function(e) { //don't forget to pass this 'e' event parameter
e.preventDefault();
scope.deselectAllMarkers();
e.stopPropagation();
return false;
});
_
これの誰かを試してみてください
1 .event.stopPropagation()
2 .event.preventDefault()
3 . _return false
_
イベントハンドラーからのイベント伝播をオーバーライドすることはできません。次のように、ページが読み込まれた後、組み込みのリーフレットヘルパーを使用する必要があります。
$('.element').each (i,el)->
L.DomEvent.disableClickPropagation(el);