如何使用可点击的内容打开悬停事件的弹出窗口

2022-01-20 00:00:00 leaflet popup javascript html

我目前正在使用传单.

我正在尝试创建一个带有可点击内容的弹出窗口.

and i am trying to create a popup with with clickable content.

现在我找到了如何将点击事件上的弹出窗口与内容绑定:

now i found how i can bind popups on click event with content:

marker.on('click', function(e){
     marker.bindPopup("<div />").openPopup();
}

我发现了如何在悬停时创建弹出窗口:

and i found out how to create the popup on hover:

marker.on('mouseover', function(e){
    e.target.bindPopup("<div />").openPopup();

    }});        

marker.on('mouseout', function(e){  
    e.target.closePopup();

}});

现在我似乎不能做的是让弹出窗口保持打开状态，以便用户点击弹出窗口内的链接.我将不胜感激.

now what i cant seem to do is make the popup stay open in order for the user to click on links inside the popup. i would appreciate any help.

推荐答案

一种方法是这样 http://jsfiddle.net/cxZRM/98/基本上它是在您的设置中添加一个计时器，并且您仅在经过任意长时间后才关闭弹出窗口，以便给用户一些时间在您的 div 上进行交互.

one approach is this http://jsfiddle.net/cxZRM/98/ basically it's adding a timer to your setup and you only close the popup after an arbitrarily long time has passed so as to give the user some time to interact on your div.

marker.on('mouseover', function(e){
    e.target.bindPopup("dsdsdsdsd").openPopup();
    start = new Date().getTime();
  });        

marker.on('mouseout', function(e){  
    var end = new Date().getTime();
    var time = end - start;
    console.log('Execution time: ' + time);
    if(time > 700){
    e.target.closePopup();
    }
});

更好的方法是使用 http://jsfiddle.net/AMsK9/确定您的鼠标位置并在鼠标仍在弹出窗口周围的区域内时保持弹出窗口打开.

a better approach would be to use http://jsfiddle.net/AMsK9/ to determine your mouse position and keep the popup open while the mouse is still within an area around the popup.

相关文章