マップ内のdivのリーフレットマップでのパン/ドラッグを無効にします

マップ自体に埋め込まれたdivボックスの上をクリックしてドラッグすると、パンを抑制する方法を知っていますか？

たとえば、ここで、凡例の上をクリックしてドラッグすると、マップが一緒にドラッグされます。その機能を抑制したい。私はこのテクニックを知っていますが、これが唯一の方法であるかどうか知りたいです：

map.dragging.disable();

leaflet

— コンコラート氏
ソース

jQuery .hoverリスナーを使用して、同様の機能を実装しました（handlerInおよびhandlerOutを使用して、ドラッグを無効および有効にします）。それはあなたのための選択肢であるかどうかわからない： api.jquery.com/hover

— evv_gis

Leaflet Webサイトの例を使用して、L.Controlオブジェクトがとしてインスタンス化される場所に注意してくださいinfo。これは、<div>マップのホバーインタラクションに関連付けられた右上のボックスです。以下はindex.html、リーフレットの例で定義されている場所です。

    // control that shows state info on hover
    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
            : 'Hover over a state');
    };

    info.addTo(map);

ユーザーのカーソルがこの<div>ボックス内にあるときにドラッグを無効にするには、オブジェクトを含むHTMLElement（<div>要素）にイベントリスナーを追加しL.Controlます。

    // Disable dragging when user's cursor enters the element
    info.getContainer().addEventListener('mouseover', function () {
        map.dragging.disable();
    });

    // Re-enable dragging when user's cursor leaves the element
    info.getContainer().addEventListener('mouseout', function () {
        map.dragging.enable();
    });

以前にインスタンスmapとして定義されたことを思い出してくださいL.Map。

— アーサー
ソース

@アーサーのおかげで、私はこのアプローチに精通しています。pointer-events：autoやpointer-events：noneなどのcssを使用して、私にはまったく機能しないソリューションを誰かが提供することを期待していました。他の誰もより良い解決策を投稿しない場合、それが最良の解決策であることを意味するので、私はあなたにチェックをします。

— コンコラート氏14

私もそれを見たいです。CSSでこの問題を解決できればいいのですが、どの要素でポインターイベントを管理する必要がありますか？leaflet-control要素は、に含まれるleaflet-container要素と、後者は、トリガーズームおよびパニングそのポインタイベントを受信しています。

— アーサー14

興味のあるdivにそれを配置しようとしていませんでした。

— コンコラート氏14

ええ、それは理にかなっています：<div>興味の対象は、leaflet-controlそれ自体がの内部にある子ですleaflet-container。イベントはleaflet-container、子（leaflet-control）の前に親（）によって受信されます。

— アーサー14

それに代わる解決策は、JavaScriptを使用してイベントの伝播を停止することです（ズームボタンなどのLeafletコントロールの場合と同様）。

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

— イリヤ・ズベレフ
ソース