单击图层时如何阻止地图单击事件触发？

Question

I have a click event that fires when clicking on the map. However, I also have a separate event when clicking on a marker layer. Is it possible to stop the map click event from firing when I click on a marker?

The map click event:

map.on('click', function (e) {
    if (isAddingLocations) {
        console.log(e.lngLat);
        $('#formtable').modal('show');
        clickCoords = e.lngLat.toArray();
        document.getElementById("latitudef").value = String(clickCoords[1])
        document.getElementById("longitudef").value = String(clickCoords[0]);
    }
});

The marker click event:

map.on("click", "quebec", function (e) {
    map.getCanvas().style.cursor = 'pointer';
    var location = e.features[0].properties.location;
    var province = e.features[0].properties.province;
    var link = e.features[0].properties.link;
    var coordinates = e.features[0].geometry.coordinates.slice();

    timeadded = e.features[0].properties.timeadded;

    document.getElementById("location").innerHTML = location + ", " + province;
    document.getElementById("link").innerHTML = '<a class="btn btn-info btn-lg" href="' + link + '"target="_blank" role="button">More Info</a>';
    document.getElementById("latitudee").innerHTML = coordinates[1];
    document.getElementById("longitudee").innerHTML = coordinates[0];
    document.getElementById("locatione").innerHTML = location;
    document.getElementById("provincee").innerHTML = province;
    document.getElementById("linke").innerHTML = link;
            
    if (isAddingLocations) {
        $('#formedit').modal('show');
    }
    else {
        sidedivsize_toggle(sdiv3, sdiv1, sdiv2);
    }
});

I was thinking maybe there could be a "not 'quebec'" expression or something in the layer parameter. Or perhaps a if the second event fires prevent the first one. Not sure how one could do any of those things. And of course, any other solution is welcome.

Answer 1

There are probably various solutions to this issue. One solution is the clickOneLayer function of Map-GL-Utils which fires different callbacks depending on whether a layer was clicked or whether a click missed everything.

Answer 2

Found a work around in MB github if anyone else comes across this. https://github.com/mapbox/mapbox-gl-js/issues/9875

Essentially though, we stop the click event from doing anything as it bubbles up the dom chain from the Map Layer, to the Map. Example :

map.on('click', 'points', function (e) {
    console.log('clicked on layer', e);
    e.clickOnLayer = true;
});
                
map.on('click', function (e) {
    if (e.clickOnLayer) {
        return;
    }
    console.log('map clicked', e);
});