javascript - 如何仅当鼠标悬停在元素上至少 1 秒时才触发 mouseover 事件？

Question

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

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

如果有人可以解释导致鼠标悬停事件延迟触发所需的逻辑或 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");
});