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

Answer 1

The logic is as follows:

When the mouse moves over the object a timer is created that will trigger in 1000 milliseconds. When the mouse moves off the object, if the timer has not yet triggered, the timer is disabled and removed from memory preventing it from triggering.

Answer 2

I inspired by Robert (thanks) and for to loading data detail from table I use this:

<tr onmouseover="funcDelay= setTimeout('loadData(5)', 1000)" onmouseout="clearTimeout(funcDelay)">

And function for load data

function fLoadDatDetail(vZadId) {
  $("#divId").load("/controller/function/"+vZadId);
}

You must keep mouse 1 second over one row of the <TABLE>, to get details of it.

Answer 3

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

Answer 4

check out the hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html it will do exactly what you want.

I usually dont post links to answers but it is easy to use and would be good to read over it and learn it.