如何使用 leaflet 1.7.1 禁用弹出提示上的事件

Question

I display a marker on a map with a popup window in which an image is displayed with a hyperlink.
When the mouse in on the tip, an hand is displayed (why?) and if I click then the popup is closed??

I added in my css the disable of the events on the tip but that seems to not be the solution.

var options = {
   'className': 'custom-popup'
}
popup = "<a href='" + (BASE_URL || '') + m.link + "'>" + "<img src='" +  (BASE_URL || '') + m.image + "' /></a>"; 
marker.bindPopup(popup,options).openPopup();

The css custom-popup supersedes the leaflet.css:

.custom-popup div.leaflet-popup-content {
  min-Width: 300px;
  max-Width: 300px;
  max-Height: 500px;
}
.custom-popup .leaflet-popup-content-wrapper {
  background:#2c3e50;
  color:#fff;
  font-size:16px;
  line-height:24px;
}
.custom-popup .leaflet-popup-tip-container {
  width:40px;
  height:20px;
  pointer-events: none;
}
.custom-popup .leaflet-popup-tip {
  background:#2c3e50;
}   

Answer 1

When the mouse in on the tip, an hand is displayed (why?) and if I click then the popup is closed??

Precisely because pointer-events: none is the default for .leaflet-popup-tip-container . The tip does not trigger events, so when a user clicks on the tip, the click goes straight through to the underlying element (the Leaflet map), which does trigger events. Then, the default behaviour when clicking on the map itself is to close the active popup.

Also related: There is no such thing as "disabling" events and parts of a Leaflet popup .

The approach here would be to apply the CSS rule pointer-events: auto or pointer-events: initial to .leaflet-popup-tip . Pointer interactions on the tip shall trigger DOM events that are not listened to and therefore do nothing .

Answer 2

Don't add the popup directly to marker, create a popup "layer" and open it, when clicked on the marker:

// a global variable
var popup = L.popup({'className': 'custom-popup', closeOnClick: false, autoClose: false, closeButton: true});

function openPopup(e){
    var marker = e.target;
    popup.options.offset = marker.options.icon.options.popupAnchor;
    popup.setContent(marker._popupContentTemp).setLatLng(marker.getLatLng()).addTo(map)
}


//your marker creation with click event
marker = new L.marker(latlng).addTo(lmap);
marker.on('click',openPopup, this)
marker._popupContentTemp = "<a href='" + (BASE_URL || '') + m.link + "'>" + "<img src='" +  (BASE_URL || '') + m.image + "' /></a>"; 

Now the popup is opened with the custom content and can't closed by clicking on the marker