8
votes

I want popup doesn't show itself when I click on Leaflet marker. I cannot use clickable : false because I it will make the markers "act as a part of the underlying map" and this is unacceptable for me. I tried the next code

marker.on('click', function(event) {
  event.originalEvent.preventDefault();
});

without any results. What is the right way to prevent popup showing without using clickable : false property of marker object.

Edit 1: All I need is to open all the popus on the map by clicking one custom button, still I don't want popup show itself after I click on the particular marker

5

5 Answers

6
votes

Just don't bind a popup to the marker. Here's a fiddle with 2 markers. One has a popup and the other does not.

L.marker([51, 0]).bindPopup("this is a popup").addTo(map);

L.marker([51, 1.5]).addTo(map);

EDIT: I've edited the fiddle and think it might be what you are asking. Here's the important part of the code:

function onClick(event) {
    event.target.closePopup();
}
6
votes

Try this workaround:

marker.bindPopup('my popup content');

// remove openPopup click handler (actually all click handlers)
marker.off('click');

// Do nothing on click. This is not necessary, but now marker
// doesn't act like part of underlying map
marker.on('click', function() {return;});

See plunker for details.

2
votes

None of the other answers worked for me (possibly because of a newer version of Leaflet). I ended up skipping marker.bindPopup() and just creating the popups separately using L.popup() then calling map.openPopup(thePopup) when I needed them to appear.

Something like this:

var map = L.map(),
    popup = L.popup().setContent("Stuff"),
    marker = L.marker();
popup.setLatLng(marker.getLatLng());

// In my event handler
map.openPopup(popup);
2
votes

Juste remove openPopup from the click event of the marker.

marker.bindPopup('My popup!');
marker.off('click', this.openPopup);
-1
votes

add return false . it should work. though i am not very sure.

marker.on('click', function(event) {
  event.originalEvent.preventDefault();
  return false;
});