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

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

delay(document.getElementById('someelem'), function() {

Leave a Comment