仅当鼠标悬停在元素上至少 1 秒时，如何触发 mouseover 事件？答案

【问题标题】：How to have a mouseover event fire only if the mouse is hovered over an element for at least 1 second?仅当鼠标悬停在元素上至少 1 秒时，如何触发 mouseover 事件？
【发布时间】：2011-09-08 00:46:13
【问题描述】：

我想在用户将鼠标悬停在某个图像上时显示一个对话框。那部分有效。不幸的是，如果鼠标甚至只是快速越过图像的一角，它也会显示对话框。我希望仅当鼠标在图像上停留一整秒时才显示对话框，以避免意外弹出。

我看到了this question，但它是针对 jQuery 的，我正在使用 Prototype。我对 jQuery 了解的不够多，无法解释该解决方案。

如果有人能解释导致鼠标悬停事件延迟触发所需的逻辑或 JavaScript 功能，我将不胜感激。

【问题讨论】：

好吧，如果你想学习一些简单的 jquery，我发布的答案会很容易实现

标签： javascript prototypejs

【解决方案1】：

您不能延迟事件的触发，但可以延迟对事件的处理。

这是一个没有 jQuery 或 Prototype 的快速示例，它会更容易理解。

var delay = function (elem, callback) {
    var timeout = null;
    elem.onmouseover = function() {
        // Set timeout to be a timer which will invoke callback after 1s
        timeout = setTimeout(callback, 1000);
    };

    elem.onmouseout = function() {
        // Clear any timers set to timeout
        clearTimeout(timeout);
    }
};


delay(document.getElementById('someelem'), function() {
    alert("Fired");
});

【讨论】：

我在想我必须在延迟后检查鼠标坐标。我什至不认为我可以清除鼠标退出的超时。辉煌
这个方案简单有效！我将这种方法与事件委托一起使用，即使在我非常复杂的事件处理情况下，它也能很好地工作！

【解决方案2】：

我受到 Robert 的启发（感谢），并且为了从表中加载数据详细信息，我使用了这个：

<tr onmouseover="funcDelay= setTimeout('loadData(5)', 1000)" onmouseout="clearTimeout(funcDelay)">

加载数据的函数

function fLoadDatDetail(vZadId) {
  $("#divId").load("/controller/function/"+vZadId);
}

您必须将鼠标悬停在<TABLE> 的一行上 1 秒，才能获取它的详细信息。

【讨论】：

【解决方案3】：

查看hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html 它会做你想做的事。

我通常不会发布答案的链接，但它很容易使用，并且可以很好地阅读和学习。

【讨论】：

据我了解，OP 没有使用 jQuery。 Prototype 中是否有类似的系统或者不依赖 jQuery 的系统？
我倾向于阅读一个问题，并且喜欢“哦，天哪，我能回答的问题！！”并在不仔细阅读整个内容的情况下回答它。

【解决方案4】：

逻辑如下：

当鼠标移到对象上时，会创建一个计时器，该计时器将在 1000 毫秒内触发。当鼠标移离对象时，如果计时器尚未触发，则计时器将被禁用并从内存中删除，以防止其触发。

【讨论】：

需要注意的是：不能延迟 mouseover 事件的触发。此解决方案的作用是检测鼠标悬停后是否在 1000 毫秒内鼠标移出并阻止对话框显示。