Raphael JS 工具提示在第一次悬停时不显示

Question

目前我有一个使用 raphael 创建的竞技场地图，地图上的每个 svg 元素在悬停时都有一个工具提示。工具提示不会在 svg 元素的第一次悬停时显示，但如果用户再次输入 svg 元素，它将显示。

我认为这与我的 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'
            });
        });

    }

Answer 1

您正在等待添加工具提示，直到鼠标悬停触发，在此之前添加它，

之前：

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

Answer 2

我同意安德鲁的观点。在第一个 el.mouseover 之前，工具提示不会被“实例化”。

这可能是解决方案，但我将详细说明一些提示，可能有助于将来解决此类问题。

我看到你正在使用 alert('test')。这将帮助您确定是否正在访问代码，但它对于确定执行顺序并不是那么好（这似乎是这里的问题）。

改为使用两种方法之一来“调试”JavaScript。它是一个非常强大的运行时工具。方法如下：

1. 以编程方式：添加JS关键字调试器；这将设置断点并在执行期间停止您的代码。

   el.mouseover(函数() { 调试器； addTip(this.node, tipText); 控制台.log（节点）； this.toFront(); 这个.attr({ 光标：'指针'， 填充：'#990000', });

此可能已帮助您解决问题，因为您会看到此代码仅在第一次鼠标悬停之后被触发。

提示：在您的浏览器中打开单步调试器之前，调试器不会在断点处“停止”。为此，我推荐 Chrome 中的开发工具。您所做的就是右键单击页面并选择“检查元素”。这将打开一个控制台，提供按钮播放、跨步、跨步。一开始这可能是陌生的，但逐步调试 JavaScript 是成为高级 JS 开发人员必须具备的最重要的工具。这非常重要。 :) 刷新页面，将鼠标悬停在您的元素上，您应该会看到它在调试器代码行处停止执行。

“2.”使用开发工具设置断点而不是“调试器；”。这更灵活，因为断点是在浏览器运行时设置的，而不是物理嵌入代码中。

FireBug for Firefox 也很不错。但这需要您进行一些调查。

Step-Debugging 对你有好处，试试吧！ 希望这可以帮助。 一切顺利！ 纳什