Does anyone know how to suppress panning when you click and drag over top of a div box embedded within the map itself?

For example here, when you click and drag over top of the legend, the map drags with you. I want to suppress that function. I am aware if this technique, but i want to know if this is the only way:

  • I have implemented similar functionaility using a jQuery .hover listener (using handlerIn and handlerOut to disable and enable dragging). Not sure if that is an option for you: api.jquery.com/hover
    – evv_gis
    Jul 8, 2014 at 21:59

4 Answers 4


Using the example from the Leaflet website, note where the L.Control object is instantiated as info; this is the <div> box in the upper-right associated with the map's hover interaction. Here is where it is defined in index.html from the Leaflet example:

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

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        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');


To disable the dragging when a user's cursor is inside this <div> box, add an event listener to the HTMLElement (a <div> element) that contains the L.Control object:

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

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

Recall that map was defined as the L.Map instance earlier.

  • Thanks @Arthur, i am familiar with this approach. I was hoping someone might offer a solution using css as in pointer-events:auto or pointer-events:none or somthing like those, which do not quite work for me. If no one else posts a better solution, I will give you the check, as it will mean that that is the best solution. Jul 9, 2014 at 13:11
  • I should like to see that as well. It would be nice if CSS could solve this problem, but which element should have its pointer events managed? The leaflet-control element is contained by the leaflet-container element and the latter is receiving the pointer events that trigger zoom and panning.
    – Arthur
    Jul 9, 2014 at 13:19
  • I have been trying to put it on the div of interest to no avail. Jul 9, 2014 at 13:21
  • Yeah, and that makes sense: the <div> of interest is a child of leaflet-control which itself is inside of leaflet-container. The events are received by the parent (leaflet-container) before the child (leaflet-control).
    – Arthur
    Jul 9, 2014 at 15:09

An alternative solution to that is to stop event propagation with JavaScript (like it's done for Leaflet controls, e.g. zoom buttons):

var div = L.DomUtil.get('div_id');
if (!L.Browser.touch) {
    L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
    L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);

I think the easy way is,

$('div').on("mousedown", L.DomEvent.stopPropagation);

It will stop the dragging of the map inside the div element.

  • 1
    This is a very simple and elegant solution. If you don't use jQuery, this is roughly the same in pure JavaScript: document.getElementById("mydiv").onmousedown = L.DomEvent.stopPropagation;.
    – sgrubsmyon
    Jun 28, 2023 at 9:28

A small optimization for the solution from @Arthur. Use mousedown and mouseup. So it didn't trigger when you just drag over your div. Only when you start dragging inside your div.

Attention use mouseup for the whole html

$('.yourDiv').mousedown( function() {

$('html').mouseup( function() {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.