The first click will not trigger the mouse down event in chrome

I make a little modified on the example: crs-simple.

I add a rectangle on a map. And there is a mousedown event listening on the rectangle. I add the options to map: renderer: L.canvas() and preferCanvas: true.

After I drag and drop the map, when I first click the Rectangle nothing happens. When I click the rectangle second time, the mousedown event is fired. But the first click should fire mousedown event also.

After I comment out the following lines, the program works.

renderer: L.canvas()
preferCanvas: true

Chrome 73.0.3683.86 x64 Leaflet: 1.6

Here is the code:

<script>
    var map = L.map('map', {
        crs: L.CRS.Simple,
        renderer: L.canvas(),                                                      
        preferCanvas: true,  
    });

    var bounds = [[0,0], [1000,1000]];
    var image = L.imageOverlay('https://leafletjs.com/examples/crs-simple/uqm_map_full.png', bounds).addTo(map);

    map.fitBounds(bounds);

    // define rectangle geographical bounds
    var bounds = [[500, 500], [750, 750]];
    // create an orange rectangle
    var device = L.rectangle(bounds, {color: "#ff7800", weight: 1, fillOpacity:1}).addTo(map);

    function onDeviceMouseDown(e) {
        alert("You clicked the map at " + e.latlng);
    }

    device.on('mousedown', onDeviceMouseDown);
</script>

[johnd0e]

Click handled here: https://github.com/Leaflet/Leaflet/blob/d843c3b88486713827d7e860b58bdba75bfbd5a2/src/layer/vector/Canvas.js#L351

And on first click after drag this._map._draggableMoved(layer) is true, that’s why we miss first click.

Inside of _draggableMoved there is check of map.dragging.moved(): https://github.com/Leaflet/Leaflet/blob/d843c3b88486713827d7e860b58bdba75bfbd5a2/src/map/handler/Map.Drag.js#L89-L91

Todo: inspect https://github.com/Leaflet/Leaflet/blob/master/src/dom/Draggable.js

[mingio]

Your support is greatly appreciated.