¿Cómo se activa un evento de mouseover solo si el mouse está sobre un elemento por al menos 1 segundo?

Question

Quiero mostrar un cuadro de diálogo cuando un usuario pasa sobre una imagen determinada. Esa parte funciona Desafortunadamente, si el mouse simplemente pasa la esquina de la imagen rápidamente, se mostrará el cuadro de diálogo. Me gustaría que el diálogo se muestre solo si el mouse se deja sobre la imagen durante un segundo completo para evitar ventanas emergentes inadvertidas.

Vi this question pero es para jQuery y estoy usando Prototype. No sé lo suficiente jQuery para interpretar esa solución.

Si alguien pudiera explicar la lógica o la funcionalidad de JavaScript que se requerirá para causar un disparo retardado del mouseover, lo agradecería.

Answer 1

No puede retrasar el encendido del evento, pero puede retrasar su manejo del evento.

Aquí hay un ejemplo rápido sin jQuery o Prototype que lo hará más fácil de entender.

var delay = function (elem, callback) { 
    var timeout = null; 
    elem.onmouseover = function() { 
     // Set timeout to be a timer which will invoke callback after 1s 
     timeout = setTimeout(callback, 1000); 
    }; 

    elem.onmouseout = function() { 
     // Clear any timers set to timeout 
     clearTimeout(timeout); 
    } 
}; 


delay(document.getElementById('someelem'), function() { 
    alert("Fired"); 
}); 

Answer 2

La lógica es la siguiente:

Cuando el ratón se mueve sobre el objeto se crea un temporizador que activará en 1000 milisegundos. Cuando el mouse se mueve fuera del objeto, si el temporizador aún no se ha activado, el temporizador se desactiva y se elimina de la memoria para evitar que se dispare.

Answer 3

revisa hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html hará exactamente lo que quieras.

Normalmente no publico enlaces a las respuestas, pero es fácil de usar y sería bueno leerlo y aprenderlo.

Answer 4

inspiré por Robert (gracias) y para detallar los datos de carga de la mesa utilizo este:

<tr onmouseover="funcDelay= setTimeout('loadData(5)', 1000)" onmouseout="clearTimeout(funcDelay)"> 

y función de los datos de carga

function fLoadDatDetail(vZadId) { 
    $("#divId").load("/controller/function/"+vZadId); 
} 

Debe mantener ratón 1 segundo sobre una fila del <TABLE>, para obtener detalles al respecto.