javascript,鼠标事件问题！是高手进

2025-04-08 13:50:14

推荐回答（1个）

回答1：

要知道，鼠标移动事件是瞬时的，只要鼠标动一动，这个事件就会触发。所以鼠标在Dom上移动一次，会触发很多次鼠标移动事件。这意味着，所谓鼠标停止事件，就夹在两次鼠标移动事件的中间。何为停止？鼠标不动是停止，但鼠标不动是一个持续性的操作，怎么监听事件？

你要监听的是鼠标停止移动事件，也就是说想要监听鼠标在移动一段时间后不再移动这个事件。虽然没有原生的事件支持，但可以通过模拟来实现这个功能。但是在模拟这个功能之前，你必须得明确，你打算怎么定义鼠标停止事件，前面说了，鼠标随便动一动就是很多个鼠标移动事件。那最后一次鼠标移动，距离下一次鼠标移动，间隔多久，你会认为应该触发鼠标停止移动事件呢？

模拟的思路就是，每次鼠标移动，都将这个事件触发的时间点记录下来，当经过一段时间，如果没有触发鼠标移动，就触发鼠标停止移动事件。但显然，这个事件会比较延迟。

下面假定两次鼠标移动间隔超过50毫秒则为停止移动，模拟代码如下：



 
   New Document

// 鼠标两次移动间隔超过50毫秒为停止移动事件触发
var TIMEOUT_OF_STOP_MOVE = 50;

window.onload = function(){
var tar = document.getElementById('tar');
// 给div绑定鼠标移动事件
tar.onmousemove = function(){
// 获取系统时间，亦为目标最新鼠标移动事件触发时间
var now = new Date();
// this.lastMove == null
// 表示鼠标移动开始
// now - this.lastMove < TIMEOUT_OF_STOP_MOVE
// 表示距离上次触发鼠标移动事件不超过TIMEOUT_OF_STOP_MOVE毫秒
if(this.lastMove == null || (now - this.lastMove < TIMEOUT_OF_STOP_MOVE)){
// 更新最后移动时间
this.lastMove = now;
// 终止鼠标停止事件处理
clearTimeout(this.timer);
// 重新绑定鼠标停止事件处理
this.timer = setTimeout(function(){
alert('鼠标停止移动了！');
// 鼠标停止移动事件处理
// ...
// 鼠标停止移动事件的处理代码就写在这里
// ...
// 清除最后移动时间
this.lastMove = null;
}, TIMEOUT_OF_STOP_MOVE);
}
}
}