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.
Réponses
Trop de publicités?
Peter Bailey
Points
62125
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>
eyelidlessness
Points
28034
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.
MikeN
Points
8490
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 survol et la suivante est la fin. En savoir plus sur: http://docs.jquery.com/Events/hover
scunliffe
Points
30964
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 laquelle "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.
