傳單彈出窗口未注冊點擊事件

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