mouseenter - mouseover javascript

¿Cómo hacer que se dispare un evento de mouseover solo si el mouse está sobre un elemento durante al menos 1 segundo?

Question

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

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

Si alguien pudiera explicar la lógica o la funcionalidad de JavaScript que se requerirá para provocar una activación retardada del evento mouseover, se lo agradecería.

Answer 1

La logica es como sigue:

Cuando el mouse se mueve sobre el objeto, se crea un temporizador que se activará en 1000 milisegundos. Cuando el mouse se aleja 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 2

Me inspiré en Robert (gracias) y para cargar detalles de datos de la tabla, uso esto:

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

Y función para cargar datos.

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

Debe mantener el mouse 1 segundo sobre una fila del <TABLE> , para obtener detalles del mismo.

Answer 3

No puede retrasar la activación 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 4

Echa un vistazo a la página http://cherne.net/brian/resources/jquery.hoverIntent.html que hará exactamente lo que quieres.

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