Javascript onHover event

javascript javascript-events
tmtest picture tmtest · Nov 4, 2008 · Viewed 149k times · Source

Is there a canonical way to set up a JS onHover event with the existing onmouseover, onmouseout and some kind of timers? Or just any method to fire an arbitrary function if and only if user has hovered over element for certain amount of time.

Answer

Peter Bailey picture Peter Bailey · Nov 4, 2008

How about something like this?

<html>
<head>
<script type="text/javascript">

var HoverListener = {
  addElem: function( elem, callback, delay )
  {
    if ( delay === undefined )
    {
      delay = 1000;
    }

    var hoverTimer;

    addEvent( elem, 'mouseover', function()
    {
      hoverTimer = setTimeout( callback, delay );
    } );

    addEvent( elem, 'mouseout', function()
    {
      clearTimeout( hoverTimer );
    } );
  }
}

function tester()
{
  alert( 'hi' );
}

//  Generic event abstractor
function addEvent( obj, evt, fn )
{
  if ( 'undefined' != typeof obj.addEventListener )
  {
    obj.addEventListener( evt, fn, false );
  }
  else if ( 'undefined' != typeof obj.attachEvent )
  {
    obj.attachEvent( "on" + evt, fn );
  }
}

addEvent( window, 'load', function()
{
  HoverListener.addElem(
      document.getElementById( 'test' )
    , tester 
  );
  HoverListener.addElem(
      document.getElementById( 'test2' )
    , function()
      {
        alert( 'Hello World!' );
      }
    , 2300
  );
} );

</script>
</head>
<body>
<div id="test">Will alert "hi" on hover after one second</div>
<div id="test2">Will alert "Hello World!" on hover 2.3 seconds</div>
</body>
</html>

Related questions

How can I trigger an onchange event manually?

I'm setting a date-time textfield value via a calendar widget. Obviously, the calendar widget does something like this : document.getElementById('datetimetext').value = date_value; What I want is : On changing value in the date-time textfield I need to reset some …

Read More
Using jQuery to test if an input has focus

On the front page of a site I am building, several <div>s use the CSS :hover pseudo-class to add a border when the mouse is over them. One of the <div>s contains a <…

Read More
Failed to load resource: the server responded with a status of 500 (Internal Server Error) in Bind function

I'm trying to send a call using ajax but in Chrome it is rising error but in firefox there is no error. But still it can't calling the method. I tried to record my call in firebug but there is …

Read More