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，工具提示才被“实例化”。

这可能是解决方案，但我会详细说明一些可能有助于解决此类问题的技巧。

我看到你正在使用警报（'测试'）。这将帮助您确定是否已达到代码，但这对于确定执行顺序（这似乎是问题）并不是那么好。

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

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

el.mouseover（function（）{ 调试器; addTip（this.node，tipText）; 的console.log（节点）; this.toFront（）; this.attr（{ cursor：'指针'，填充：'＃990000'， }）;

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

提示：在浏览器中打开步调试器之前，调试器不会在断点处“停止”。为此我建议在Chrome中使用Dev Tools。您只需右键单击页面并选择“检查元素”即可。这将打开一个控制台，让按钮播放，步进，步入。起初这可能是外来的，但步骤调试JavaScript是成为高级JS开发人员最重要的工具。这是非常重要的。 :) 刷新页面，鼠标悬停元素，你应该看到它在调试器代码行停止执行。

“2”。使用Dev Tools设置断点而不是'debugger;'。这更加灵活，因为断点在运行时在浏览器中设置，并且未在代码中物理嵌入。

FireBug for Firefox也非常好。但是你需要对此进行一些调查。

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

Raphael JS Tooltip在第一次悬停时不显示

2 个答案: