javascript - 鼠标悬停时未定义 ParentNode DOM 错误

Question

怎么样，

[here is a small page illustrating my problem ](Firefox 中出现问题)

所以我有一个函数 onmouseout="regress(event, this)" 来测试鼠标是否实际上离开当前元素及其任何子元素。 (more details on why I did this and what is the matter)。 如果鼠标确实在外面，我想停止按钮上的动画并重置计时器(我就是这么做的)。并且它有效。

只是事实并非如此。在 Firefox(测试 v5.0)中就是这样。我收到与 DOM 相关的错误。触发该函数的元素的 parentNode 是“”，然后它的父节点将是“未定义”，然后我收到错误并且代码爆炸。

令人费解的部分是:只有当鼠标真正离开按钮区域时才会出现此错误。还有另一种情况，当 onmouseout 事件被触发时(为了避免这种情况，我使用了这个函数)。这是 onmouseout 将按钮的一个子按钮移至按钮的另一个子按钮。在这种情况下，parentNode 工作正常，从buttonChild 到button 到buttonParent 到blabla 到BODY，然后停止。

我的问题是，为什么在一种情况下会出现未定义的错误，而在另一种情况下则不会。请注意，Chrome 或 IE9 中没有错误。另外我该如何解决它？

这让我很困惑。感谢您的帮助。

我很困惑。

这里还有 javascript 函数:

function regress(evt, x){
    //if (!e && window.event) 
    if (window.event) 
        var e = window.event;
    else
        var e = evt; //if we got here, you're using Firefox
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;

    while (reltg.tagName != 'body')
    {   
        //alert(reltg.id+" == " + x.id);
        if (reltg.id == x.id)
        {

            return;
        }
        reltg = reltg.parentNode;
        //alert(reltg.tagName);
    }
    // I'm on true mouseout, do stuff here:
    $("#"+x.id+"ThickParent").stop(true, false);
    $("#"+x.id+"ThickParent").width(0);

    canStartAgain=true;

    stopInterval = true;
    timerValue = 1.50;
    $("#"+x.id+"Timer").html("");
    //thanks to: http://www.webmasterworld.com/javascript/3752159.htm
}

取消注释 //alert(reltg.id+"== "+ x.id); 以准确查看 onmouseout 何时被触发以及什么元素 reltg. ParentNode 在什么时间开启。

Answer 1

几个月前我也遇到了同样的问题。您会注意到从顶部退出不会发生错误。由于某种原因，“body”标签被缩小以适合内部 div 并延伸到顶部，当移动到底部(或左、右)时，FF 会触发事件，相关目标指向“html”标签并在你的循环的停止条件是标签是“body”标签。 “html”标签的父级是文档，文档的父级是 null，当您尝试访问 null< 的 tagName 属性时，会抛出错误。要达到预期结果，您必须将停止条件更改为 while (reltg.tagName != 'html') 或什至将错误恢复能力最强的 while (reltg && (reltg.tagName != ' body '))。