在传单中双击 CircleMarker 禁用地图缩放

Question

I'm trying to disable the zoom on the map when I click in a CircleMarker object, but until now, no success.

This is my code:

var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
myCircle.on("click", function () {
    //my click stuff
});
myCircle.on("dblclick", function () {
    //my dblclick stuff
});

Everytime the dblclick event is fired, the map is zoomed, how to disable it?

Answer 1

try

var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
map.doubleClickZoom.disable(); 

refer this document

Answer 2

Following solution seems to work for me:

myCircle.ondblclick = function (event) {
    event.stopPropagation();
    return false;
};

I have also tried another one, which also works quite well in practice, but I find it a bit hacky:

myCircle.on("click", function () {
  map.doubleClickZoom.disable();
  setTimeout(function(){map.doubleClickZoom.enable();}, 1000);
});

Answer 3

If anyone is here looking for a solution to the use case "I want to zoom in on the map on double-click but not if the double-click happens on an entity", this is how I solved it:

const circle = new L.circlemarker(...).addTo(map);
circle.on("dblclick", () => {
  map.doubleClickZoom.disable();

  doSomething();

  setTimeout(() => {
    map.doubleClickZoom.enable();
  }, 1); // Without the timeout the map will still zoom in on entity double-click
});

FYI event.preventDefault(); event.stopPropagation(); and return false; inside the "dblclick" handler did not work for me.

Answer 4

All answers here are after the Leaflet map object has been initialized.

I'd like to give my take by stating that you can also disable doubleClickZoom during map object initialization.

Note: This will disable doubleClickZoom to the whole map and not just circleMarkers.

map = L.map('map', {
      center: [39.8282, -98.5795],
      zoom: 5,
      doubleClickZoom: false
    });

PS I'm running leaflet version 1.7.1

Answer 5

You can return false from your dblclick handler which will stop the event from propagating eg

myCircle.on("dblclick", function () {
    //my dblclick stuff
    return false;
});

Now other elements (such as the map) won't handle that event

Answer 6

Try this... Disable map.doubleClickZoom when you mouse over the circle and enable when you leave

var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);

myCircle
    .on("click", function () {
        //my click stuff
    })
    .on("dblclick", function () {
        //my dblclick stuff
    })
    .on('mouseover', function () {
        map.doubleClickZoom.disable();
    })
    .on('mouseout', function () {
        map.doubleClickZoom.enable();
    });

Answer 7

None of the answers above worked for me:

• calling native ev.originalEvent.preventDefault() did nothing
• returning false neither
• I don't like the doubleClickZoom workaround that much (although… it works!)

Using Leaflet DomEvent did the job for me:

import { DomEvent } from 'leaflet';

myFeature.on("dblclick", function (ev) {
  DomEvent.stopPropagation(ev)
});

Answer 8

First you need to disable the map double click zoom and then enable it again on the map click event. So when you double click the map after double clicking on the marker it zoom again ;) I tried it and it works for me perfectly! Enjoy!

map.doubleClickZoom.disable();

map.on('click', function (e) { 
  map.doubleClickZoom.enable();
 });