Javascript onHover événement

Est-il une manière canonique pour configurer un JS onHover événement avec l'existant, onmouseover, onmouseout, et une sorte de minuteries? Ou tout simplement une méthode pour l'incendie d'une fonction arbitraire si et seulement si l'utilisateur a planait au-dessus de l'élément pour un certain laps de temps.

InformationsquelleAutor tmtest | 2008-11-04
  1. 26

    Comment quelque chose comme cela?

    <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>
    • vous pourriez supprimer entièrement l'instruction if où delay === undefined en spécifiant dans les paramètres de la fonction de valeur par défaut, comme function( elem, callback, delay = 1000),
    InformationsquelleAutor Peter Bailey
  2. 13

    Pouvez-vous préciser votre question? Qu'est-ce que "ohHover" dans ce cas et comment fonctionne-t-il correspondre à un retard dans le délai d'attente?

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

    InformationsquelleAutor eyelidlessness
  3. 11

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

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

    La première fonction est le début du pointage et de la prochaine, c'est la fin. Lire plus:
    http://docs.jquery.com/Events/hover

    • De très bons conseils! Je pense qu'il fait des fusions de jQuery mouseenter et mouseleave (qui sont légèrement différentes), par la manière.
    • jQuery n'est pas mentionné dans la question.
    InformationsquelleAutor MikeN
  4. 2

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

    onhover (hover) serait définie comme étant la période de temps tout en "plus" de quelque chose. À mon humble avis

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

    Pour le dossier que j'ai fait des trucs avec ce "faux" hover événement dans IE6. C'était assez cher et au final j'ai abandonné en faveur de la performance.

    • J'attends le délai d'attente est voulu empêcher les événements de se produire lorsque l'utilisateur passe la souris sur l'élément (comme par accident, ou en cas de déménagement dans une autre partie de l'interface. Imaginez si cliquez pour ouvrir les menus ont également été passez à ouvrir, mais n'avait pas de retard; ensuite, l'utilisateur peut être confronté à des menus instantanément l'ouverture sur d'autres choses pendant que l'utilisateur essaie simplement de déplacer la souris sur la page.
    • 50MHz - c'est tout à fait possible, surtout si la onmouseout efface la minuterie similaire à @Peter Bailey réponse ci-dessus. Au moment où j'ai répondu, je pensais que l'OP était peut-être confus quant à la façon de la souris au-dessus de/out/enter/leave événements travaillé et été d'essayer de faire Le Complicator Gants: thedailywtf.com/Articles/The_Complicator_0x27_s_Gloves.aspx
    InformationsquelleAutor scunliffe