Me gustaría retrasar un evento de desplazamiento en jquery. Estoy leyendo de un archivo cuando el usuario se desplaza sobre un enlace o etiqueta. No quiero que este evento ocurra inmediatamente en caso de que el usuario simplemente mueva el mouse por la pantalla. ¿Hay alguna forma de retrasar el disparo del evento?
Gracias.
Código de ejemplo:
$(function() {
$('#container a').hover(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
},
function() { $('#info').remove(); }
});
});
ACTUALIZACIÓN: (14/1/09) Después de agregar el complemento HoverIntent, el código anterior se cambió al siguiente para implementarlo. Muy sencillo de implementar.
$(function() {
hiConfig = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
timeout: 200, // number = milliseconds delay before onMouseOut
over: function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
}, // function = onMouseOver callback (REQUIRED)
out: function() { $('#info').remove(); } // function = onMouseOut callback (REQUIRED)
}
$('#container a').hoverIntent(hiConfig)
}
jquery
events
mouseevent
settimeout
Brettski
fuente
fuente
Respuestas:
Utilice el complemento hoverIntent para jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html
Es absolutamente perfecto para lo que describe y lo he usado en casi todos los proyectos que requerían la activación del mouse sobre los menús, etc.
Hay un problema en este enfoque, algunas interfaces carecen de un estado de 'desplazamiento', por ejemplo. navegadores móviles como safari en el iphone. Es posible que esté ocultando una parte importante de la interfaz o navegación sin forma de abrirla en un dispositivo de este tipo. Puede solucionar esto con CSS específico del dispositivo.
fuente
Debes verificar un temporizador al pasar el mouse. Si no existe (es decir, este es el primer hover), créelo. Si existe (es decir, este no es el primer hover), mátelo y reinícielo. Establezca la carga útil del temporizador en su código.
Apuesto a que jQuery tiene una función que resuelve todo esto para ti.
Editar : Ah, sí, el complemento jQuery al rescate
fuente
Estoy totalmente de acuerdo en que hoverIntent es la mejor solución, pero si eres un desgraciado que trabaja en un sitio web con un proceso largo y prolongado para la aprobación de los complementos de jQuery, aquí tienes una solución rápida y sucia que funcionó bien para mí:
Este es solo para expandir un <li> si el mouse ha estado en él por más de 300ms.
fuente
Puede usar una llamada setTimeout () con un clearTimeout () en el evento mouseout.
fuente
En 2016, la solución de Crescent Fresh no funcionó como se esperaba para mí, así que se me ocurrió esto:
fuente
Mi solución es sencilla. Retrase el menú abierto si el usuario mantiene el mouseenter en obj durante más de 300ms:
fuente