Question

我的问题很简单。当我的鼠标移动时，我想执行一个在"you are moving"标签中打印div的功能。当我的鼠标没有移动时，我希望文本功能消失。下面是我能想到的伪代码。因此，例如，文本函数将每50/1000秒调用一次，并检查鼠标是否在移动。如果它正在移动，文本将显示。如果鼠标没有移动，则不会显示文本。我怎么能实现这一点，因为没有mousestop事件？

$(function() {  setInterval(text, 50);
});
function text() {
    /*Do something to check if mouse is moving*/
    /*if mouse is moving*/
    if{
        $("#shu").text("You are moving");
    } else {
        $("#shu").remove();
    }
}

Answer 1

纯JavaScript解决方案：

var shu = document.getElementById("shu");
var timeout;

document.addEventListener("mousemove", function() {
  shu.innerHTML = "You are moving";
  if (timeout) clearTimeout(timeout);
  timeout = setTimeout(mouseStop, 150);
});

function mouseStop() {
  shu.innerHTML = "";
}

jsFiddle

Answer 2

$(window).mousemove(
  function() {
    $("#shu").text("You are moving");
  }, function() {
   $("#shu").remove();
  }
);

Answer 3

您可以使用jQuery .mousemove函数以及设置间隔来检查鼠标移动。

这是一个示例代码。

＆＃13;

var lastTimeMouseMoved = "";
jQuery(document).ready(function(){
    
   $(document).mousemove(function(e){
     $(".text").show();
   
       lastTimeMouseMoved = new Date().getTime();
       var t=setTimeout(function(){
           var currentTime = new Date().getTime();
           if(currentTime - lastTimeMouseMoved > 1000){
$('.text').fadeOut('fast');
             
           }
       },1000)
   }); 
});

＆＃13;

body{
    background-color:#333;
}
.text{
    display:none;
  color:white;
  font-size:25px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">Your are moving!!</div>

＆＃13;

Answer 4

function mouseStop(callback) {
  $(window).mousemove((function() {
    var t;
    return function() {
      if(typeof t !='undefined')
         clearTimeout(t); //we should check that `t` is not null
      t = setTimeout(function() {
        callback();
      }, 200)//change to 200 so it will not trigger on mouse move 
    }
  })())
}
mouseStop(function() {
  console.log("stop!!!")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 5

使用jquery

var lastMove = new Date().getTime() ,currentTime;
$(window).mousemove(function(){
  lastMove = new Date().getTime();
});
  setInterval(function(){
currentTime = new Date().getTime();
if(currentTime - lastMove > 400)
    $("#shu").empty();
else 
    $("#shu").text("moving");
  },20);

切换mousemove mousestop事件

5 个答案: