How to have a mouseover event fire only if the mouse is hovered over an element for at least 1 second?

Question

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.

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

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.

Answer 1

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

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