如果鼠标悬停在元素上至少1秒钟，如何触发鼠标悬停事件？ [英] How to have a mouseover event fire only if the mouse is hovered over an element for at least 1 second?

问题描述

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

I want to display a dialog when a user mouses over a certain image. That part works. Unfortunately if the mouse even just passes over the corner of the image quickly it will display the dialog. I would like to have the dialog show only if the mouse is left over the image for one full second so as to avoid inadvertent pop ups.

我看到这个问题但它适用于jQuery而我正在使用Prototype。我不太了解jQuery来解释这个解决方案。

I saw this question but it is for jQuery and I am using Prototype. I don't know enough jQuery to interpret that solution.

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

If someone could explain the logic or JavaScript functionality that will be required to cause a delayed firing of the mouseover event I would appreciate it.

推荐答案

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

You can't delay the firing of the event, but you can delay your handling of the event.

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

Here's a quick example without jQuery or Prototype that will make it easier to understand.

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

这篇关于如果鼠标悬停在元素上至少1秒钟，如何触发鼠标悬停事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！