2014-10-05 61 views
1

我目前正在與傳單。如何打開懸停事件與可點擊的費用

我試圖用可點擊的內容創建一個彈出窗口。

現在我發現我怎麼可以綁定上單擊事件彈出窗口的內容:

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

}}); 

現在我似乎無法做的是讓彈出保持打開狀態,以便用戶點擊彈出窗口中的鏈接。 我將不勝感激任何幫助。

+0

您應該在彈出窗口中有一個「關閉」按鈕,並刪除mouseout事件處理程序。 – laruiss 2014-10-05 13:05:57

+0

@laruiss謝謝你的想法。但我一直在尋找一些彈出窗口的東西,如果你在懸停後停留在極限之內,它就不會關閉。通過這種方式,用戶將能夠從彈出窗口中的選項中進行選擇。 – raven 2014-10-05 13:12:47

回答

2

一個辦法是這樣的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/ 來確定你的鼠標位置並保持打開彈出而鼠標仍然是圍繞在彈出的區域內。

+0

謝謝你的答案。第二個選項聽起來很貼切,但彈出內容的大小是動態的。你有什麼想法我可以如何計算你的第二個解決方案的流行音樂的大小? – raven 2014-10-05 13:49:13

+0

document.getElementById(「mydiv」)。offsetWidth可以幫你 – 2014-10-06 05:21:39

+0

最後我決定用你的第一個想法加上一個。我用來保持彈出窗口打開的定時器,直到彈出窗口本身觸發懸停事件,然後計時器被停止。我可以與彈出窗口進行交互。 – raven 2014-10-07 08:06:31

0

我有同樣的問題,我想爲鼠標懸停不同的彈出,另一個用於點擊,而問題是,當我徘徊了點擊彈出關閉,所以我所做的就是把一個標誌:

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

     } 
    }