如何使鼠标悬停事件仅在鼠标悬停在元素上至少1秒钟时触发？

Question

我想在用户将鼠标悬停在特定图像上时显示一个对话框。这个部分已经可以实现。不幸的是，如果鼠标只是快速通过图像的角落，它就会显示对话框。我希望只有当鼠标悬停在图像上一整秒钟时才显示对话框，以避免意外弹出。

我看到了这个问题，但它是针对jQuery的，而我正在使用Prototype。我不知道足够的jQuery来解释那个解决方案。

如果有人能解释一下将需要哪些逻辑或JavaScript功能来导致延迟触发mouseover事件，我将不胜感激。

- John Conde

---

如果你想学习一些简单的jQuery，我发布的答案将非常容易实现。 - Mertis

Answer 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");
});

- Robert

---

我本以为在延迟之后必须要检查鼠标坐标。我甚至没有想到可以在鼠标移出时清除超时。太棒了！ - Charlie Martin

这个解决方案简单而有效！我正在使用事件委托的方法，它在处理非常复杂的事件情况下也能很好地工作！ - Eight Lives

Answer 2

我受到Robert的启发(感谢他)，为了从表格中加载数据详情，我使用了以下方法：

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

加载数据的函数

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

您需要将鼠标悬停在 <TABLE> 的一行上超过1秒钟，才能获取其详细信息。

- Mareg

Answer 3

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

我通常不在回答中发布链接，但这很容易使用，并且阅读并学习它会很有帮助。

- Mertis

---

据我所知，OP没有使用jQuery。在Prototype中是否有类似的系统或不依赖于jQuery的系统？ - Matt Razza

我有一个倾向，看到一个问题就会觉得“哦，好棒啊，我可以回答这个问题！！”，然后在仔细阅读整个问题之前就回答了它。 - Mertis

Answer 4

逻辑如下：

当鼠标移动到对象上时，会创建一个计时器，在1000毫秒后触发。当鼠标移开对象时，如果计时器还没有触发，则计时器将被禁用并从内存中删除，防止其触发。

- Matt Razza

---

需要注意的是：您无法延迟触发mouseover事件。这个解决方案的作用是检测是否在1000毫秒内跟随mouseover事件后出现了mouseout事件，并防止对话框显示。 - Femi

Answer 5

这对我们的团队很有效（类似于Robert的回答）：

window.myShowToolTipFunction = function(element) {
        
        var timeout = setTimeout(function () {
            showTooltip(element);
        }, 300);
        
        $(element).on('mouseleave.recordHover', function () {
            clearTimeout(timeout);
        });
    }

并且

function showTooltip(element){
      // do your stuff here 
    }

- RayLoveless