1

Tengo una función que me detecta si hay inactividad en mi pagina haciendo uso del evento mousemove. Si el cursor del ratón no tiene movimiento durante un periodo entonces cambio el valor de una variable de true a false. El problema que tengo es que esta función no me vale para moviles.

window.addEventListener('load', empezar, false);

function empezar() {
  document.body.addEventListener('mousemove', function () {
        tActual = new Date().getTime();
    }, false);
  setInterval(actividad, comprobar);
}

var tActual = 0;
var comprobar = 10000;
var expirado = false;

function actividad() {
        if (Math.abs(tActual - new Date().getTime()) > comprobar) {
            expirado = true; // Expirado
        } else {
            expirado = false; // No Expirado
        }
}

1 respuesta 1

3

Es sencillo, solo necesitas adecuar un poco tu código. Esto te servirá:

var registrarInactividad = function () {
    var t;
    window.onload = reiniciarTiempo;
    // Eventos del DOM
    document.onmousemove = reiniciarTiempo;
    document.onkeypress = reiniciarTiempo;
    document.onload = reiniciarTiempo;
    document.onmousemove = reiniciarTiempo;
    document.onmousedown = reiniciarTiempo; // aplica para una pantalla touch
    document.ontouchstart = reiniciarTiempo;
    document.onclick = reiniciarTiempo;     // aplica para un clic del touchpad
    document.onscroll = reiniciarTiempo;    // navegando con flechas del teclado
    document.onkeypress = reiniciarTiempo;

    function tiempoExcedido() {
        alert("Estuvo inactivo durante mucho tiempo.")
    }

    function reiniciarTiempo() {
        clearTimeout(t);
        t = setTimeout(tiempoExcedido, 3000)
        // 1000 milisegundos = 1 segundo
    }
};

registrarInactividad(); //Esto activa el contador

Te dejo un pequeño fiddle para que lo pruebes.

https://jsfiddle.net/ath29fu7/

EDITADO

Para almacenar simplemente en una variable booleana sería algo así:

var activo = true;
var registrarInactividad = function () {
    var t;
    window.onload = reiniciarTiempo;
    document.onmousemove = reiniciarTiempo;
    document.onkeypress = reiniciarTiempo;
    document.onload = reiniciarTiempo;
    document.onmousemove = reiniciarTiempo;
    document.onmousedown = reiniciarTiempo;
    document.ontouchstart = reiniciarTiempo;
    document.onclick = reiniciarTiempo; 
    document.onscroll = reiniciarTiempo;
    document.onkeypress = reiniciarTiempo;

    function tiempoExcedido() {
        activo = false;
        registrarInactividad();
    }

    function reiniciarTiempo() {
        clearTimeout(t);
        t = setTimeout(tiempoExcedido, 3000)
        activo = true;
    }
};

registrarInactividad(); //Esto activa el contador

Solo ocupas una variable global y que cada vez que se ejecute la función tiempoExcedido() se defina como falso la variable activo y se vuelva a llamar la funcion.

7
  • No funciona muy bien aunque es una buena aproximación al problema ya que si en el momento de cerrar el alert muevo el mouse fuera de la ventana o simplemente hago click para cerrar la ventana sin mover luego el raton no se produce ningún evento y por lo tanto no sale ningún mensaje de inactividad.
    – Popularfan
    Commented el 22 feb. 2019 a las 20:57
  • Hola, el alert es la función terminal, esto quiere decir que cuando se ejecuta es para cerrar la sesión del usuario inactivo. No debería ejecutarse más. En cambio, si necesitas usarlo de otra forma, deberías especificarme un poquito mejor el contexto para con gusto ayudarte.
    – k3llydev
    Commented el 22 feb. 2019 a las 21:02
  • Me interesaría que me cambiara una variable a un valor = true cuando estuviera inactivo y volviera a false cuando no.
    – Popularfan
    Commented el 22 feb. 2019 a las 21:08
  • Listo, he editado con lo que especificas. Espero te sirva!
    – k3llydev
    Commented el 22 feb. 2019 a las 21:17
  • 1
    Otro punto es la manera como as asignado los eventos, que pasa si en el documento hay otro evento tipo onkeypress asignada a otra función ? no machacaría la primera función asignada ?
    – Popularfan
    Commented el 22 feb. 2019 a las 21:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.