Question

我发现了一个像这样的话题，但我完全没有得到它。在我的代码中，我有鼠标移动时，执行此操作，但是当它移动半秒钟时，请执行此操作，但移动时请执行此操作。这是我的临时jQuery：

$(document).ready(function() {

 $('.test').mouseenter(function(){

  $(this).mousemove(function(){
   $(this).css({
    'background-color' : '#666',
    'cursor' : 'none'
   });
  });

 });

 $('.test').mouseout(function(){
  $(this).css({
   'background-color' : '#777',
   'cursor' : 'default'
  });
 });

});

而且我完全不知道怎么做，基本上我的代码就是这样 - 当你用鼠标输入元素并且你的鼠标在那个元素里面移动时将它写入CSS并且当鼠标离开元素时将其写入CSS ，但是当鼠标位于该元素内部并且当它在这段时间内没有移动时，我无法弄明白。

Answer 1

听起来像是在寻找超时。在类似的项目中，我使用了这样的东西：

var timer;

function active() {
    // Apply active styles
}

function inactive() {
    // Apply inactive styles
}

$('.test').mousemove(function(){
    active(); // Apply active styles
    clearTimeout(timer); // Reset the timer
    timer = setTimeout(out, 500);
});

将鼠标移动到该区域后，会启动一个计时器，重置每次鼠标移动。如果允许计时器到期，则用户不活动，我们运行任何我们喜欢的代码。

Answer 2

所以我只是在谷歌上搜索。这就是答案：

  $(document).ready(function() {
    var countdown;
    $('.test').hover(function() {
      setTimeout(function(){
        $('.test').css({
          'background-color' : '#666',
          'cursor' : 'none'
        });
        cursor();
      }, 2000);
    }, function(e){
      $('.test').css({
          'background-color' : '#777',
      'cursor' : 'default'
      });
    });

    $('.test').mousemove(function() {
      $('.test').css({
        'background-color' : '#777',
        'cursor' : 'default'
        });
        cursor();
      });
      function cursor() {
        countdown = setTimeout(function() {
          $('.test').css({
            'background-color' : '#666',
            'cursor' : 'none'
          });
        }, 2000);
      }
    });
  });

Answer 3

我知道您想要检测特定元素上的鼠标移动。

要实现这一目标，您需要使用mousemove事件......遗憾的是没有mousefroze事件！

因此，您将使用setTimeout()并在鼠标移动时不断清除其回调。由于该事件在一次轻微移动时会多次触发，因此可以将延迟设置得非常紧。所以它应该是准确的。

只有当鼠标停止移动时才会执行setTimeout回调。这就是整个“技巧”。

关于延迟......我认为100 ms是最低的准确值。少于此将在“慢”用户移动时产生闪烁。

mouseenter在这里并不是真的有用，因为它被鼠标移动事件立即覆盖（因为当鼠标进入......它也会移动！）。但是mouseleave或mouseout对于恢复元素的原始状态并清除超时非常有用...因为鼠标不会移动到你的元素上并不意味着它不会移动一点都不所以你必须在离开时清楚。

$(document).ready(function() {

  var test = $('#test');
  var moveTimer;

  test.on("mouseout",function(){
    $(this).css({
      'background-color' : 'white',
    }).text("");
    clearTimeout(moveTimer);
  });

  test.on("mousemove",function(){
    console.log("I'm moving!");

    clearTimeout(moveTimer);
    moveTimer = setTimeout(function(){
      console.log("I stopped moving!");
      test.css({
        'background-color' : 'red',
      }).text("The mouse is not moving.");
    },100)

    $(this).css({
      'background-color' : 'blue',
    }).text("Movement detected...");
  });
});

#test{
  margin:50px;
  border:2px solid black;
  height:200px;
  width:200px;
  cursor:pointer;
}

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

CodePen

Answer 4

这可能与您当前的代码有所不同，但我认为CSS比JavaScript更合适。

{{1}}

这些CSS行应该完全相同，没有复杂性。请注意，在您的示例中，对于鼠标移动的每个像素，再次设置css。由于您没有在鼠标移出时删除事件处理程序，因此该事件实际上已多次运行。

当鼠标在jQuery中停止移动元素时

4 个答案: