javascript,鼠标事件问题！是高手进
MouseMove鼠标移动事件!可以捕捉到鼠标移动事件!但是怎么捕捉，鼠标停止移动的事件呢？没有这个事件啊！在鼠标移动的时候监听停止事件！怎么写？求高手求代码！js原生，...
MouseMove 鼠标移动事件! 可以捕捉到鼠标移动事件!
但是怎么捕捉，鼠标停止移动的事件呢？ 没有这个事件啊！
在鼠标移动的时候 监听 停止事件！ 怎么写？
求高手求代码！ js原生，不要jquery 展开
但是怎么捕捉，鼠标停止移动的事件呢？ 没有这个事件啊！
在鼠标移动的时候 监听 停止事件！ 怎么写？
求高手求代码！ js原生，不要jquery 展开
1个回答
展开全部
要知道，鼠标移动事件是瞬时的，只要鼠标动一动，这个事件就会触发。所以鼠标在Dom上移动一次，会触发很多次鼠标移动事件。这意味着，所谓鼠标停止事件，就夹在两次鼠标移动事件的中间。何为停止？鼠标不动是停止，但鼠标不动是一个持续性的操作，怎么监听事件？
你要监听的是鼠标停止移动事件，也就是说想要监听鼠标在移动一段时间后不再移动这个事件。虽然没有原生的事件支持，但可以通过模拟来实现这个功能。但是在模拟这个功能之前，你必须得明确，你打算怎么定义鼠标停止事件，前面说了，鼠标随便动一动就是很多个鼠标移动事件。那最后一次鼠标移动，距离下一次鼠标移动，间隔多久，你会认为应该触发鼠标停止移动事件呢？
模拟的思路就是，每次鼠标移动，都将这个事件触发的时间点记录下来，当经过一段时间，如果没有触发鼠标移动，就触发鼠标停止移动事件。但显然，这个事件会比较延迟。
下面假定两次鼠标移动间隔超过50毫秒则为停止移动，模拟代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<div id="tar" style="width:300px;height:300px;background:#ddd"></div>
<script type="text/javascript">
// 鼠标两次移动间隔超过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);
}
}
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
