Home / Questions / 142332
Accepted
Lina Cortés
Asked: 2020-02-29 13:05:00 +0800 CST 2020-02-29 13:05:00 +0800 CST

Detect cursor inactivity

  • 772

I need to detect that the user is not moving the cursor (mouse) with jquery so that after x seconds I show him a modal window. I know the mousemove function exists but I need the opposite of this. Thanks.

EDITED

Is there a possibility to stop the setTimeout() after displaying the modal?

javascript

5 Answers

  1. You can make a timeout with the function you comment, making it reset every time you move the mouse. If I didn't move it in x time, the function you wanted would skip:

    var ratonParado = null;
var milisegundosLimite = 2000;

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

   ratonParado = setTimeout(function() {
      // aqui lanzarias la ventana
   }, milisegundosLimite);
});
    • 9

  2. Create a new function in Jquery to determine if the mouse is active inside the document, use a timeoutto determine the time, example (execute it, put the cursor in the white space of the snipped and wait 5 seconds):

    (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>

    • 7
  3. Best Answer

    I leave you an example of the function you ask for with the interaction of adding it or removing it. I hope it serves as an example for you.

    <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>

    • 2

  4. You can make use of the same javascript functions as setTimeout or setInterval, storing the last date you moved the cursor and then checking that the time you want has passed to execute another action

    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

  5. I am using the following function, which captures the mouse movement in a "move" variable, if after a minute there is no movement, then it executes an "exit" function in the "usersControl.php" file, to redirect to the 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
    • 0