Question

我想确保用户希望通过鼠标悬停来弹出一些东西。我不希望用户在没有意图的情况下意外触发弹出的内容。 setTimeout不起作用，因为即使它非常短暂，弹出窗口仍然会弹出，它只会延迟。我想要的是用户将鼠标悬停1秒以便弹出显示。

**更新：

当我这样做时：

<div onmouseover="myTimer=setTimeout('display(this)', 5000);">

计时器工作，并在5秒后显示，但this未通过，我无法通过$(element).next()等获取元素。当我这样做时：

 <div onmouseover="myTimer=setTimeout(display(this), 5000);">

计时器不起作用。有什么问题，如何才能获得计时器并传递this？

谢谢！

** update2：来自here的this问题：“setTimeout（）执行的代码在一个单独的执行上下文中运行，该函数从中调用它。因此，被调用函数的这个关键字将被设置为窗口（或全局）对象，它不会与调用setTimeout的函数的this值相同。“

我找到了克服这个here的答案，你必须“保存对setTimeout函数调用的上下文的引用”

Answer 1

这应该适合你：

<div id="example">Hover me</div>
<script type="text/javascript">
    (function(){
        var timer;
        var el = document.getElementById('example');

        el.onmouseover = function(){
            timer = setTimeout(function(){
                display(el);
                // If display takes no arguments and uses the "this" keyword inside it
                // Use display.call(el); instead
            }, 1000);
        }

        el.onmouseout = function(){
            clearTimeout(timer);
        }
    })();
</script>

Example on JSFiddle

Answer 2

鼠标悬停时，您可以启动计时器。在鼠标输出时将定时器重置为0.如果定时器达到1秒，则可以触发事件并将定时器重置为0.

Answer 3

我后来遇到了一个名为hoverIntent jQuery插件的东西，值得一试。

Answer 4

我很确定这应该有效：

onmouseover="myTimer=setTimeout(yourFunctionName, 1000);"

您还必须添加：

onmouseout="clearTimeout(myTimer);"

几秒钟之后鼠标悬停后，是否还有onmouseover火？

4 个答案: