When using Leaflet's canvas renderer, click events behave like mouseup events

user_14376283 0
Viewed 389

If I set Leaflet's map renderer to canvas, click events on items behave like mouseup events.

What this means is that when you follow these steps:

  1. Click somewhere outside the item
  2. Hold down click button
  3. Move cursor to item
  4. Release click button

This will trigger click event. Again, this only happens when using canvas renderer. Note to perform these steps, you need to disable map dragging.

Here is minimal working example taken from https://esri.github.io/esri-leaflet/examples/:

      var map = L.map("map", { renderer: L.canvas() }).setView([37.75, -122.23], 10);

      L.esri.basemapLayer("Topographic").addTo(map);

      map.dragging.disable();

      const circle = L.circle([37.75, -122.23], { radius: 1000 }).addTo(map);
      circle.on("click", () => alert("clicked"));
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Esri Leaflet Quickstart</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <!-- Load Leaflet from CDN -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>

    <!-- Load Esri Leaflet from CDN -->
    <script
      src="https://unpkg.com/esri-leaflet@3.0.2/dist/esri-leaflet.js"
      integrity="sha512-myckXhaJsP7Q7MZva03Tfme/MSF5a6HC2xryjAM4FxPLHGqlh5VALCbywHnzs2uPoF/4G/QVXyYDDSkp5nPfig=="
      crossorigin=""
    ></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

leaflet dom-events javascript
1 Answers

This is an interesting edge case, but here's my take on why it's happening: click and mouseup events are similar. What differentiates them is that a click event listens to see if a mousedown and mouseup event occur on the same element. You can read more about that here.

When using an L.canvas renderer, with map.dragging disabled, there is a canvas component that overlays the entire map. When you mousedown and mouseup anywhere on the map, this is considered a click event as far as that canvas is concerned. So even though you are only mouseuping on the L.circle, the click event is getting triggered.

This is a very interesting bug in a rare edge case, and I recommend logging it as a bug in the leaflet github repo. @IvanSanchez is a leaflet author and is pretty active on here, perhaps he can give some input.

user_120109840
Related