拉斐爾JS工具提示不顯示在第一次懸停

目前我有一個raphael創建的競技場地圖，每個svg元素在地圖上有一個工具提示時，懸停。工具提示不會顯示在svg元素的第一個懸停上，但會顯示用戶是否再次輸入svg元素。拉斐爾JS工具提示不顯示在第一次懸停

我認爲它與我的addTip「mouseeneter」函數有關，但我對理解JS還是一個新東西，所以我不確定。下面是我使用添加工具提示的SVG元素上懸停的代碼，我使用的代碼是基於關閉此stackoverflow forum question和的jsfiddle我創建link

var tip = $("#tip").hide(); 
    var tipText = "Tip the Canoe."; 
    var over = false; 
    function addTip(node, txt) 
    { 
     $(node).mouseenter(function(){ 
      tipText = txt; 
      tip.fadeIn(); 
      over = true; 
     }) 
     .mouseleave(function(){ 
      tip.fadeOut(); 
      over = false; 
     }); 
    } 

    for (var i = 0, len = rsrGroups.length; i < len; i++) { 
     var el = rsrGroups[i]; 
     el.mouseover(function() { 
      addTip(this.node, tipText); 
      console.log(node); 
      this.toFront(); 
      this.attr({ 
       cursor: 'pointer', 
       fill: '#990000', 
      }); 
      //alert('test'); 
     }); 

     el.mousemove(function(e){ 
      if (over){ 
       tip.css("left", e.clientX+20).css("top", e.clientY+20); 
       tip.text(tipText); 
      } 
     }); 
     el.mouseout(function() { 
      this.attr({ 
       fill: '#003366' 
      }); 
     }); 
     el.click(function() { 
      this.attr({ 
       fill: 'green' 
      }); 
     }); 

    }

來源

2012-06-11 user1431083

你能隔離這個發生故障的片段jsfiddle嗎？ – pp19dd

我實際上已經有了這個東西[在這裏]（http://jsfiddle.net/knottAverage/ArKDp/16/） – user1431083

您正在等待添加工具提示直到鼠標懸停火災，之前然後將其添加，

前：

for (var i = 0, len = rsrGroups.length; i < len; i++) { 
    var el = rsrGroups[i]; 
    el.mouseover(function() { 
     addTip(this.node, tipText);

後：

function addTip(node, txt) { 
    node.mouseover(function(){ 
     tipText = txt; 
     tip.fadeIn(); 
     over = true; 
     }).mouseout(function(){ 
     tip.fadeOut(); 
     over = false; 
    }); 
} 

for (var i = 0, len = rsrGroups.length; i < len; i++) { 
    var el = rsrGroups[i]; 
    addTip(el, tipText); 
    el.mouseover(function() {

來源

2012-06-11 16:11:20 Andrew

感謝您的建議，但它沒有解決問題，在控制檯#tip不響應時我移動該行。 – user1431083

@ user1431083適用於我，http://jsfiddle.net/ArKDp/17/，無論如何都是原創作品。 – Andrew

啊，沒有注意到你改變了mouseenter/leave到mouseover/out。現在效果很好。謝謝你的幫助！ – user1431083

我同意安德魯。工具提示沒有被「實例化」，直到第一個el.mouseover。

這可能是解決方案，但我會詳細說明一些可能有助於解決未來這類問題的技巧。

我看到你正在使用alert（'test'）。這將幫助您確定代碼是否已達到，但對於確定執行順序（這似乎是此處的問題）並不是那麼好。

改爲使用兩種方法之一來「調試」JavaScript。這是一個非常強大的運行時工具。這裏是：

以編程方式：添加JS關鍵字調試器;這將設置一個斷點並在執行期間停止您的代碼。

el.mouseover（函數（）{ 調試器; addTip（this.node，tipText）; 的console.log（節點）; this.toFront（）; this.attr（{ 光標：'指針」，填充：‘＃990000’， }）;

這可能幫助你解決你的問題，因爲你會看到第一鼠標懸停在此之後的代碼僅觸發。

提示：直到在您的瀏覽器中打開一個步調試器時，調試器不會在斷點處「停止」。爲此，我建議在Chrome中使用Dev Tools。您只需在頁面上點擊右鍵並選擇'檢查元素'。這將打開一個控制檯，讓按鈕播放，切換，切入。起初這可能是外國人，但是，調試JavaScript是您成爲高級JS開發人員時最重要的工具。這是非常重要的。 :) 刷新頁面，將鼠標懸停在你的元素上，你應該看到它停止在調試器代碼行執行。

「2.」使用開發工具來設置斷點而不是'調試器'。這更加靈活，因爲斷點在運行時在瀏覽器中設置，並且沒有實際嵌入代碼中。

FireBug for Firefox也很不錯。但是這將需要你的一些調查。

步調試對你有好處，試試吧！希望這有助於。一切順利！納什

來源

2012-06-11 16:29:48

感謝調試器的提示;調用不知道它停在了tipText變量上。然而，在控制檯div＃提示不會在懸停時填充，只要我將其從mouseenter函數中取出即可。我寫錯了嗎？（var i = 0，len = rsrGroups.length; i user1431083

拉斐爾JS工具提示不顯示在第一次懸停

回答

相關問題