3

Necesito detectar que el usuario no este moviendo el cursor (mouse) con jquery para después de x segundos mostrarle una ventana modal. Se que existe la función mousemove pero necesito lo contrario a esto. Gracias.

EDITADO

¿Hay posibilidad de detener el setTimeout() después de mostrar el modal?

0

5 respuestas 5

9

Puedes hacer un timeout con la función que comentas, haciendo que se resetee cada vez que mueve el ratón. Si no lo moviese en x tiempo saltaría la función que quisieras:

var ratonParado = null;
var milisegundosLimite = 2000;

$(document).on('mousemove', function() {
   clearTimeout(ratonParado);

   ratonParado = setTimeout(function() {
      // aqui lanzarias la ventana
   }, milisegundosLimite);
});
1
  • Respondiendo tu edición, puedes "pararlo" simplemente con un booleano, que empiece en true y cuando quieras pararlo (después de mostrar el modal) se ponga a false. Simplemente tendrías que pone un if (booleano) rodeando a ratonParado = setTimeout(...);
    – Wyrncael
    el 28 feb. 2018 a las 22:01
7

Crea una nueva función en Jquery para determinar si se esta activo el mouse dentro del document, utiliza un timeout para determinar el tiempo, ejemplo (ejecutalo, pon el cursor en el espacio en blanco del snipped y espera 5 segundos):

(function ($) {
    var timeout;
    $(document).on('mousemove', function (event) {
        if (timeout !== undefined) {
            window.clearTimeout(timeout);
        }
        timeout = window.setTimeout(function () {
            //Creas una funcion nueva para jquery 
            $(event.target).trigger('mousemoveend');
        }, 5000); //determinas el tiempo en milisegundo aqui 5 segundos
    });
}(jQuery));

$(document).on('mousemoveend', function () { //agregas la nueva funcion creada, puede ser una clase o un id
    alert("mouse detenido");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1
  • ¿Hay posibilidad de detener el setTimeout() después de mostrar el modal? Cada 5 segundos me muestra la alerta, la idea sería solo mostrarlo una vez el 28 feb. 2018 a las 21:44
2

Te dejo un ejemplo de la función que pides con la interacción de agregarla o quitarla. Espero te sirva de ejemplo.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
<body> 
<button id="add"onclick="AddAlert()"> Agregar alerta </button> 
<button id="del" onclick="RemoveAlert()" style="display:none;"> Parar alerta </button>
</body>
<script>

var mouseStop = null;
var Time = 5000; //tiempo en milisegundos que espera para saefectuarse la funcion


function RemoveAlert() {
  $("#add").show();
  $("#del").hide();
  $(document).off('mousemove');
  clearTimeout(mouseStop); //agrego esto porque borra tambien el setTimeout y no ejecuta  Myfuncion.

}

function AddAlert() {
  $("#add").hide();
  $("#del").show();
  $(document).on('mousemove', function() {
     clearTimeout(mouseStop);
     mouseStop = setTimeout(Myfunction,Time);

  });
}

function Myfunction() {
     alert("Dejo de mover el raton!!"); //aqui efectua la funcion cuando dejas de mover el raton
}


</script>


</html>

0

Puedes hacer uso de las mismas funciones de javascript como setTimeout o setInterval, almacenando la ultima fecha en que movistes el cursor y luego verificando que haya pasado el tiempo que deseas para ejecutar otra acción

var interval, mouseMove;

$(document).mousemove(function(){
    //Establezco la última fecha cuando moví el cursor
    mouseMove = new Date();
    /* Llamo a esta función para que ejecute una acción pasado x tiempo
     después de haber dejado de mover el mouse (en este caso pasado 3 seg) */
    inactividad(function(){
        alert("Inactivo");
    }, 3);
  });

  /* Función creada para ejecutar una acción (callback), al pasar x segundos 
     (seconds) de haber dejado de mover el cursor */
  var inactividad = function(callback, seconds){
    //Elimino el intervalo para que no se ejecuten varias instancias
    clearInterval(interval);
    //Creo el intervalo
    interval = setInterval(function(){
       //Hora actual
       var now = new Date();
       //Diferencia entre la hora actual y la última vez que se movió el cursor
       var diff = (now.getTime()-mouseMove.getTime())/1000;
       //Si la diferencia es mayor o igual al tiempo que pasastes por parámetro
       if(diff >= seconds){
        //Borro el intervalo
        clearInterval(interval);
        //Ejecuto la función que será llamada al pasar el tiempo de inactividad
        callback();          
       }
    }, 200);
  }
0

Estoy usando la siguiente función, la cúal captura el movimiento del mouse en una variable "mover", si luego de un minuto no hay movimiento, entonces ejecuta una función "salir" en el archivo "usuariosControl.php", para redireccinar al index

//Función que se ejecuta al inicio
function init() {
    var mover= false;
        $("body").mousemove(function(){
            mover = true;
        });
       
        setInterval (function() {
           if (!mover) {
               alert("No ha habido movimiento desde hace un minuto");
                // $.post("../Control/UsuariosControl.php?op=salir");
           } else {
               mover=false;
           }
        }, 60000); // Cada minuto, pon el valor que quieras.

 }

 init();//ejecuta la función init
1

Tu Respuesta

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

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