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

检测光标不活动

  • 772

我需要检测到用户没有使用 jquery 移动光标（鼠标），以便在 x 秒后我向他显示一个模式窗口。我知道 mousemove 功能存在，但我需要与此相反。谢谢。

已编辑

显示模式后是否有可能停止 setTimeout() ？

javascript

5 Answers

  1. 您可以使用您评论的功能进行超时，每次移动鼠标时都会重置它。如果我没有在 x 时间内移动它，您想要的功能将跳过：

    var ratonParado = null;
var milisegundosLimite = 2000;

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

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

  2. 在jquery中新建一个函数来判断鼠标在里面是否处于活动状态document，用atimeout来判断时间，例子（执行它，把光标放在截图的空白处等待5秒）：

    (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

    我给你留下一个你要求的功能的例子，以及添加或删除它的交互作用。我希望它可以作为你的榜样。

    <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. 您可以使用与 setTimeout 或 setInterval 相同的 javascript 函数，存储您移动光标的最后日期，然后检查您想要的时间是否已经过去以执行另一个操作

    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. 我正在使用以下函数，它在“move”变量中捕获鼠标移动，如果一分钟后没有移动，那么它在“usersControl.php”文件中执行“exit”函数，以重定向到索引

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