Wyłącz przesuwanie / przeciąganie na mapie ulotki dla div na mapie

Czy ktoś wie, jak wyłączyć panoramowanie, gdy klikniesz i przeciągniesz nad pole div osadzone w samej mapie?

Na przykład tutaj , gdy klikniesz i przeciągniesz nad legendą, mapa przeciągnie się wraz z tobą. Chcę wyłączyć tę funkcję. Wiem, czy ta technika, ale chcę wiedzieć, czy to jedyny sposób:

map.dragging.disable();

Korzystając z przykładu ze strony internetowej Ulotki, zanotuj, gdzie L.Controlinstancja obiektu jest tworzona jako info; jest to <div>pole w prawym górnym rogu związane z interakcją najechania na mapę. Oto, gdzie jest to zdefiniowane index.htmlna przykładzie Ulotki:

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

Aby wyłączyć przeciąganie, gdy kursor użytkownika znajduje się w tym <div>polu , dodaj detektor zdarzeń do HTMLElement( <div>elementu) zawierającego L.Controlobiekt:

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

Przypomnij sobie, że wcześniej mapzdefiniowano to L.Mapwystąpienie.

Alternatywnym rozwiązaniem jest zatrzymanie propagacji zdarzeń za pomocą JavaScript (tak jak w przypadku kontroli Ulotki, np. Przycisków powiększenia):

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