Disable popup on double click event on Mapbox GL map

Question

How to disable 'show popup' on 'double click' (show popup only on 'single click' event) event without disabling 'zoom in' (or 'zoom out' (with Shift button))?

Mapbox GL jsfiddle example

Answer 1

You can track the following event. While double click it's always:

1. click
2. click
3. double click

Exactly in this order.

So:

let dbl = false;

  map.on("click", "boundary", function(e) {
    dbl = false;
    setTimeout(() => {
      if (!dbl) {
        new mapboxgl.Popup()
          .setLngLat(e.lngLat)
          .setHTML("popup content")
          .addTo(map);
      }
    }, 500)
  });
  
  map.on("dblclick", "boundary", function(e) {
    dbl = true;
  });

Should do the job. You simply need a small timeout, you can decrease that 0.5s, and check if a click event has been followed by the dblclick.