How do I trigger a click when hovering over a element for 2 seconds, using JQuery?

Question

Hi All,

How do I trigger this inline function

onClick="showMenu('mnu_searches', event, 0, this)

using JQuery...if I hover over a.menu-arrow ? I need to trigger a click after the user has been hovering over the element for 2 seconds?

Any help would be greatly appreciated, Thanks

Answer 1

use the hoverIntent plugin or doTimeout (bit heavier)

Answer 2

You can create and clear a 2 second timer, like this:

$("a.menu-arrow").hover(function() {
  $.data(this, "timer", setTimeout($.proxy(function() {
    $(this).click();
  }, this), 2000));
}, function() {
  clearTimeout($.data(this, "timer"));
});

You can give it a try here. By using $.data() we're storing a timeout per element to avoid any issues and clear the correct timer. The rest is just setting a 2 second timer when entering the element, and clearing it when leaving. So if you stay for 2000ms, it fires a .click(), if you leave it stops clear the timer.

Answer 3

You should be able to trigger the click-handler after two seconds. I suggest the following code:

$(function() {
    var timeout;

    $('a.menu-arrow').hover(function() {
        var self = this;
        timeout = setTimeout(function() {
            $(self).click();
            timeout = null;
        });
    }, function() {
        if (timeout) {
            clearTimeout(timeout);
        }
    });
});