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.

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

Solution 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.

Solution 3

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.

Solution 4

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.

View more solutions