¿hay alguna manera de saber si el evento del mouse ha salido de un lado específico del elemento? Quiero decir, tengo un DIV con un mouseover/mouseenter y quiero activar la acción solo si el mouse se va a la izquierda lado de la DIV y hacia la derecha, pero si sale desde la parte inferior o superior, no debería desencadenar ninguna acción.¿Cómo diferenciar mouseout/leave events by side en jquery?
Gracias de antemano.
Con jQuery se puede utilizar la propiedad offsetX del evento como así:
$('#element').mouseout(function(e) {
if (e.offsetX < 0 || e.offsetX > $(this).width()) {
alert('out the side!');
}
});
No creo que la propiedad es fiable entre navegadores (w/o jQuery) y creo que jQuery se normaliza (Lo probé en Chrome & IE7-9). Básicamente, la propiedad contiene dónde el cursor está relacionado con el elemento de destino en el momento en que se dispara el evento. Si el valor es menor que 0 o mayor que el ancho del elemento, sabrá que el cursor estaba fuera del lado izquierdo o derecho del elemento en el momento en que salió de los límites del elemento.
puede comprobar el pageX y pageY propiedades de la event object y compararlas con las dimensiones del elemento en cuestión (por ejemplo, de offset y añadiendo en outerWidth/outerHeight según el caso).
No es fácil, AFAIK, pero se puede hacer.
Al desplazar el mouse, se compara la posición del mouse con la posición del elemento.
Ver posición tutorial ratón para jQuery: http://docs.jquery.com/Tutorials:Mouse_Position
(que utiliza mousemove en el tutorial, pero también funciona para MouseEnter/mouseleave)
tal vez usted podría utilizar la función mouseout jQuery (o MouseLeave?) y agregue un controlador personalizado con javascript para obtener las coordenadas del elemento, la altura y el ancho, y rastrear si las coordenadas del mouse están más allá de su límite.
es decir, el evento de su mouse se dispara, el controlador localiza el elemento en (x, y) -> (10, 10), la altura es 20 y el ancho es 20. Si las coordenadas del mouse son mayores de 30 en la X y entre 10 y 30 en la Y, el mouse ha dejado en el lado derecho.
Me doy cuenta de que esta es una vieja pregunta, pero estaba buscando algo similar para usar para efectos de desplazamiento. He encontrado jquery.hoverdir
Podría ser útil ...