Question

当用户将鼠标悬停在某个图像上时，我想显示一个对话框。那部分有效。不幸的是，如果鼠标甚至只是快速经过图像的角落，它将显示对话框。我想只有将鼠标悬停在图像上一整秒才能显示对话框，以避免无意中弹出窗口。

我看到了this question，但它适用于jQuery而我使用的是Prototype。我不太了解jQuery来解释这个解决方案。

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

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

Answer 2

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

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

加载数据的功能

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

您必须将鼠标放在<TABLE>的一行上1秒钟，以获取详细信息。

Answer 3

查看hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html 它会完全按照你的意愿行事。

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

Answer 4

逻辑如下：

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

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

4 个答案: