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

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