web-dev-qa-db-fra.com

Javascript onHover événement

Existe-t-il un moyen canonique de configurer un événement JS onHover avec les onmouseover, onmouseout et certains types de temporisateurs existants? Ou n'importe quelle méthode pour déclencher une fonction arbitraire si et seulement si l'utilisateur a survolé l'élément pendant un certain temps.

javascriptjavascript-events
36
tmtest

Que diriez-vous quelque chose comme ça?

<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>
26
Peter Bailey

Pouvez-vous clarifier votre question? Qu'est-ce que "ohHover" dans ce cas et comment correspond-il à un retard dans le temps de vol stationnaire?

Cela dit, je pense que ce que vous voulez probablement, c'est ...

var timeout;
element.onmouseover = function(e) {
    timeout = setTimeout(function() {
        // ...
    }, delayTimeMs)
};
element.onmouseout = function(e) {
    if(timeout) {
        clearTimeout(timeout);
    }
};

Ou addEventListener/attachEvent ou la méthode d'abstraction des événements de votre bibliothèque préférée.

13
eyelidlessness

Si vous utilisez la bibliothèque JQuery, vous pouvez utiliser l'événement .hover () qui fusionne l'événement mouseover et mouseout et vous aide avec les éléments de synchronisation et enfants:

$(this).hover(function(){},function(){});

La première fonction est le début du vol stationnaire et la suivante est la fin. En savoir plus sur: http://docs.jquery.com/Events/hover

11
MikeN

Je ne pense pas que vous ayez besoin/que vous vouliez un délai.

onhover (hover) serait défini comme la période de temps pendant que "sur" quelque chose. A mon humble avis

onmouseover = start...

onmouseout = ...end

Pour mémoire, j'ai fait quelques trucs avec cela pour "simuler" l'événement de survol dans IE6. C'était assez cher et au final je l'ai abandonné en faveur de la performance.

2
scunliffe