传单弹出窗口未注册点击事件

Question

I am trying to embed an interactive image carousel within a Leaflet popup but any content I place within the popup element does not register mouse events.

I created a simple test to see if I could register a simple click event onto a popup, but nothing happens. Leaflet markers register click events fine, but on popups its disabled.

Why is this happening and how do I enable popup to register mouse events?

JsFiddle Example here

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// add a marker in the given location, attach some popup content to it and open the popup
var marker = L.marker([51.5, -0.09]).addTo(map);
var popup = L.popup()
    .setContent('<p>Hello world!<br />This is a nice popup.</p>')
        .openOn(marker)
 marker.bindPopup(popup); 
 //marker registers click events
 marker.on("click", displayMarkerMessage);
 // popup does not register click events
 popup.on("click", displayPopupMessage);

 function displayMarkerMessage(){
 console.log("marker click");
 } 

 function displayPopupMessage(){
 console.log("popup click");
 }

Thanks

Answer 1

Add a click event on the DOM element when you open the popup.

 function displayMarkerMessage(){
   var popup  = document.getElementsByClassName('leaflet-popup-content-wrapper');
   if(popup != null && popup.length > 0){
     L.DomEvent.off(popup[0]); //to reset all events on the popoup, maybe else it is called twice
     L.DomEvent.on(popup[0],'click',displayPopupMessage);
   }
 } 

if you have multiple popups open at the same time, you have to loop through the popups and add the click events to them.

Also you can use the popupopen event to get the popup container and add the click event. https://leafletjs.com/reference-1.6.0.html#popup-popupopen