setTimeout触发得太快

我有一个工具提示（这只是一个div），当在另一个元素的mouseover事件时出现。我想让隐藏在主要元素的mouseleave事件上的工具提示，但是，如果鼠标悬停在工具提示上，我希望工具提示仍然可见。setTimeout触发得太快

工具提示正位于其元素正下方。

我的代码如下：

var option_hide_timeout; 

$(".option").mouseover(function() { 
    showTooltip($(this)); 
}); 
$(".option").mouseleave(function() { 
    option_hide_timeout = setTimeout(hideTooltip(), 2000); // delay the hiding to allow the mouse to enter the tooltip 
}); 
$("#option_tt").mouseenter(function() { 
    clearTimeout(option_hide_timeout); 
}); 
$("#option_tt").mouseleave(function() { 
    hideTooltip(); 
}); 

function showTooltip(parent) { 
    var parentPos = parent.position(); 
    $("#option_tt").css({ 
     visibility: "visible", 
     left: parentPos.left, 
     top: parentPos.top + $(parent).height() 
    }); 
} 
function hideTooltip() { 
    $("#option_tt").css("visibility", "hidden"); 
}

的问题是，工具提示隐藏鼠标离开主元件之后。这个问题在Chrome，Firefox，Opera和IE中持续存在。

无论延迟的值是多少（在我的代码中只是一个例子，它在实践中可能会更短），它会立即触发。

我一直在使用这两种鼠标悬停/鼠标移开和的mouseenter /鼠标离开尝试 - 都产生了相同的结果，这让我的结论是，行：

的setTimeout（hideTooltip（），2000年）;

是不正确的。

在mouseleave事件中放置警报可以确保代码被调用。

我错过了一些明显的东西吗？如果是这样，一个正确的方向指针将不胜感激。

来源

2013-10-23 nullseifer

变化

option_hide_timeout = setTimeout(hideTooltip(), 2000);

到

option_hide_timeout = setTimeout(hideTooltip, 2000);

添加的括号使功能被立即调用，而不是给setTimeout。

来源

2013-10-23 17:31:31

谢谢。这也起作用，并比我作为后续发布更优雅。 – nullseifer

我似乎已经解决了我自己的问题。

$(".option").mouseleave(function() { 
    option_hide_timeout = setTimeout(hideTooltip(), 2000); // delay the hiding to allow the mouse to enter the tooltip 
});

应该是：

$(".option").mouseleave(function() { 
    option_hide_timeout = setTimeout(function() { hideTooltip() }, 2000); 
});

这是非常简单的，我应该发布前已经意识到这一点。

来源

2013-10-23 17:35:47 nullseifer

setTimeout触发得太快

回答

相关问题