Leaflet Popup 未注册点击事件

Posted 2023-03-15

【中文标题】Leaflet Popup 未注册点击事件

【英文标题】：Leaflet Popup not registering click events

【发布时间】：2020-02-05 22:18:54

【问题描述】：

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

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

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

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

谢谢

【参考方案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

【讨论】：

感谢您的明确回答，这解决了我的问题，我的弹出图像轮播现在终于可以工作了。