CODEWITHSUNDEEP
javascriptjqueryleaflet
dhiraj
dhiraj

Reputation: 436

How to disable click event on leaflet map only?

I have created the button to open the bootstrap modal inside my leaflet map id as follows,

<div id='map'> 
  <div id="bootstrapModalBtn" data-toggle="modal" data-target="#baseLayerModal">Click</div>
</div>

When I click on a map, I added the function to add the marker and open the popup as below,

map.on('click', function(e) {
    const latLng = [e.latlng.lat, e.latlng.lng];
    marker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map);
    marker.bindPopup("this is popup").openPopup();
}

But when I click my button, it opens both the bootstrap modal and leaflet popup. But I only want to open the bootstrap modal when the user clicks the button. To block this issue, I tried the following method,

$(".bootstrapModalBtn").on("click", L.DomEvent.stopPropagation);

After adding the last section, I was unable to get the bootstrap modal and leaflet popup. My question is, how to disable the click event only from the map for the button?

PS: I also tried the map.off('click') method. But I was unable to reactivate the click event after setting map.off('click'),

$(".bootstrapModalBtn").on("click", map.off('click');

Upvotes: 1

Views: 4794

Answers (1)

treecon
treecon

Reputation: 2825

Well, it seems that is only a typo, your bootstrapModalBtn element is not selected.

Replace . with # in your jQuery selector (id selector, not class). Or replace id="bootstrapModalBtn" with class="bootstrapModalBtn".

Then, as you said, use event.stopPropagation().

$("#bootstrapModalBtn").on("click", (e) => {
    e.stopPropagation();

    /* open your modal here */
});

Upvotes: 3

Related Questions