如何在带有可点击内容的悬停事件上打开弹出窗口

Question

我目前正在使用传单。

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

现在，我发现了如何将点击事件中的弹出窗口与内容绑定在一起：

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

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

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

    }});        

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

}});

现在，我似乎无法做的是使弹出窗口保持打开状态，以便用户单击弹出窗口内的链接。 我将不胜感激任何帮助。

Answer 1

一种方法是http://jsfiddle.net/cxZRM/98/基本上是在您的设置中添加一个计时器，并且只有在经过任意长时间后才关闭弹出窗口，以便给用户一些时间在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/确定鼠标的位置，并在鼠标仍位于弹出窗口周围的区域内时保持弹出窗口打开。

Answer 2

我遇到了同样的问题，我想要一个不同的弹出窗口用于鼠标悬停，另一个希望用于单击鼠标悬停，问题是当我将鼠标悬停在弹出窗口上方时，我所做的就是添加一个标志：

var modal = true;    
function onEachFeature(feature, Polygon) 
    {
        if (feature.properties && feature.properties.popupContent && feature.properties.modal) 
        { 
            Polygon.on('mouseover', function (e) {
              Polygon.bindPopup(feature.properties.popupContent);
              this.openPopup();
              modal = false;
            });
            Polygon.on('mouseout', function (e) {

                if(!modal)
                this.closePopup();
            });
            Polygon.on('click', function (e) {
                modal = true;
                Polygon.bindPopup(feature.properties.modal).openPopup();
            });

        }
    }