2009-12-07 19 views
11

Me gustaría ser capaz de detectar si el ratón está todavía sobre el elemento en el siguiente escenario:jQuery: ¿el mouse todavía está sobre el elemento?

  1. Si mouseover luego dormir durante unos segundos.
  2. Una vez hecho esto, la comprobación del mouse aún está sobre el mismo elemento.
  3. Si es verdadero, entonces haga algo.

¿Cómo puedo lograr el # 2?

Gracias.

+0

¿Qué haces durante el "sueño" – PetersenDidIt

+1

petersendidit: Nada, es sólo un tiempo de espera. – thedp

+0

¿Qué debería pasar si el mouse está "nuevamente sobre el mismo elemento" en el tiempo de espera? ¿Eso cuenta como "todavía sobre el mismo elemento"? –

Respuesta

15

Tome un vistazo al plugin para jQuery hoverIntent. Le brinda un nuevo controlador de eventos que se activará solo si ha estado sobre un elemento durante cierto tiempo. Al modificar sus opciones, debería poder lograr que haga exactamente lo que desea.

+1

+1 complemento útil – alex

+0

¡Me encanta este complemento! Muchas gracias. – thedp

+0

Un complemento similar a hoverIntent está aquí http://blog.threedubmedia.com/2008/08/eventspecialhover.html, solo depende exactamente de lo que necesite. Puede valer la pena probar ambos. – Nooshu

2

Aquí hay una manera:

Al configurar .hover() en el elemento, puede pasar 2 funciones a la misma. El primero disparará cuando el mouse esté sobre el elemento, el segundo fuego cuando el mouse se mueva.

La primera función puede configurar currentElementId (u otro indicador) y la segunda función lo borrará. De esta forma, lo único que debe hacer es verificar si currentElementId está en blanco.

+0

¿Realmente puede obtener el currentElementId si el elemento no tiene foco? ¿Solo moviendo el mouse sobre él? – thedp

+1

puede establecer esa identificación en CUALQUIER evento, busque el uso de FOCUS() aquí: http://docs.jquery.com/Events/focus –

1

Puede usar setTimeout('sleep', sleep_time) para llamar a una función después de un tiempo establecido.

Asigna controladores de eventos a onmouseover y onmouseout.

Estos controladores modifican un indicador para comprobar si el mouse todavía está en el elemento.

Dentro de la función de reposo, puede verificar el indicador y simplemente devolverlo.

+2

Una cosa a tener en cuenta, es que el evento 'onmouseover' no se activa a menos que el mouse realmente se está moviendo. Si el mouse del usuario está quieto, pero sobre el elemento, no se disparará.Corrígeme si estoy equivocado, cualquiera. – donut

+0

¡Estás casi 100% correcto! Es por eso que estoy haciendo la pregunta. Traté de jugar con 2 niveles de desplazamiento y mouseover pero luego noté lo que acabas de decir: el evento mouseover solo se activa para el nivel superior. Y a menos que mueva el mouse fuera del elemento y luego regrese a él, el evento no se dispara nuevamente. Así que la pregunta principal aquí, ¿cómo puedo resolver este problema molesto? – thedp

10

Simplemente use una bandera para indicarle si el mouse está sobre ella.

var mouseover = false; 
$('.thing').mouseenter(function(){ 
    mouseover = true; 
}).mouseleave(function(){ 
    mouseover = false; 
}); 
+0

más o menos lo que dije. –

+0

Todavía tiene el mismo problema que tengo en mis pobres intentos: quiero poder decir si el mouse todavía está allí después del tiempo de espera, y si no está sobre el elemento, entonces no haga nada. – thedp

+0

if (mouseover) {// luego haga algo sabiendo que el mouse está sobre el elemento} – PetersenDidIt

37

Esto parece funcionar (http://jsbin.com/uvoqe)

$("#hello").hover(function() { 
    $(this).data('timeout', setTimeout(function() { 

    alert('You have been hovering this element for 1000ms'); 

    }, 1000)); 
}, function() { 

    clearTimeout($(this).data('timeout')); 

}); 
+6

Esta es una manera inteligente/más clara que el uso de un complemento –

+0

Solución inteligente de hecho. –

+1

brillante. también puede agregar un segundo tiempo de espera en la función "destrabar" para retrasar el evento de desvío y evitar que algo como un menú deslizable se cierre demasiado rápido. – pbarney

1

he usado un hipervínculo para mostrar un div y luego en hover evento que establece la propiedad de tiempo de espera de este y tan pronto como me voy a mi div puedo borrar la agote el tiempo y comience a usar la función divhover para fundir el div. Espero que esto ayude.

<script type="text/javascript"> 
    $(document).ready(function() { 
     var obj; 
     $("a").hover(function() { 
      if ($("#div1").is(":hidden")) { 
       $("#div1").fadeIn(300).show(); 
      } 
     }, function() { 
      obj = setTimeout("jQuery('#div1').fadeOut(300);", 300); 
     }); 

     $("#div1").hover(function() { 
      clearTimeout(obj); 
      if ($("#div1").is(":hidden")) { 

       $("#div1").show(); 
      } 
     }, function() { 
      jQuery('#div1').fadeOut(300); 
     }); 
    }); 
</script> 
Cuestiones relacionadas