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