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

Question

我正在尝试在 Leaflet 弹出窗口中嵌入交互式图像轮播，但我放置在弹出元素中的任何内容都不会注册鼠标事件。

我创建了一个简单的测试，看看我是否可以在弹出窗口上注册一个简单的点击事件，但没有任何反应。 传单标记可以很好地注册点击事件，但在弹出窗口中它被禁用。

为什么会发生这种情况以及如何启用弹出窗口来注册鼠标事件？

JsFiddle 示例在这里

// 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");
 }

谢谢

Answer 1

当您打开弹出窗口时，在 DOM 元素上添加一个单击事件。

 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);
   }
 } 

如果您同时打开多个弹出窗口，则必须遍历弹出窗口并将单击事件添加到它们。

您也可以使用popupopen事件来获取弹出容器并添加点击事件。 https://leafletjs.com/reference-1.6.0.html#popup-popupopen