Événement Javascript onHover

Existe-t-il une manière canonique de mettre en place un événement JS onHover avec l'actuel onmouseover, onmouseout et certains types de temporisateurs? Ou simplement toute méthode pour déclencher une fonction arbitraire si et seulement si l'utilisateur a survolé l'élément pendant un certain temps.

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> 

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

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

La première fonction est le début du survol et le prochain est la fin. Pour en savoir plus: http://docs.jquery.com/Events/hover

Pouvez-vous préciser votre question? Qu'est-ce que "ohHover" dans ce cas et comment cela correspond-il à un retard dans le temps de survoltage?

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 d'événement de votre bibliothèque préférée.

Je ne pense pas que vous avez besoin / que vous voulez le délai d'attente.

Onhover (hover) serait défini comme la période de temps alors que "over" quelque chose. A mon humble avis

 onmouseover = start... onmouseout = ...end 

Pour mémoire, j'ai fait quelque chose pour "fausser" l'événement flottant dans IE6. C'était assez cher et, en fin de compte, je l'ai abandonné en faveur de la performance.