How to trigger a click on hover over an element for 2 seconds using jQuery?

Question

How to run this built-in function

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

using jquery ... if i hang a.menu-arrow ? Do I need to trigger a click after a user hangs an item for 2 seconds?

Any help would be greatly appreciated, thanks

Answer 1

You can create and clear a 2 second timer, for example:

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

You can try it here . Using $.data() , we save a timeout for each item to avoid any problems and clear the correct timer. The rest simply sets a 2-second timer when entering an item and clearing it when exiting. Therefore, if you stay for 2000 ms, it runs .click() , if you leave it, it stops clearing the timer.

Answer 2

use hoverIntent plugin or doTimeout (bit heavier)

Answer 3

After two seconds, you can start the click handler. 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); } }); });