监听鼠标移动事件mousemove的定时取样

 1 　　 let body=document.querySelector("body");//页面内容容器元素
2
document.addEventListener('mousemove',(e)=>{　　//添加一个一直存在的鼠标移动监听事件
3
let x=e.clientX;
4
let y=e.clientY;
5
img.style.top=y+"px";
6
img.style.left=x+"px";
7
})
8
9
function mov(e){　　　　　　　　　　　　　　//为下一个mousemove事件编写绑定函数
10
let span=document.createElement("span");
11
span.classList.add('myspan');
12
let x=e.clientX;
13
let y=e.clientY;
14
span.style.left=x+'px';
15
span.style.top=y+'px';
16
17
18
let a=Math.random()*10;
19
span.style.width=5+a+'px';
20
span.style.height=5+a+'px';
21
22
body.appendChild(span);
23
// console.log("hahaha");
24
setTimeout((e)=>{
25
span.remove();
26
},1000)
27
}
28
29
function mymov(){　　　　　　　　　　　　　　　　//实现定时取样的函数
30
setInterval(()=>{　　　　　　　　　　　　　　//循环定时
31
document.addEventListener('mousemove',mov);
32
　　setTimeout(()=>{
33
　　　　document.removeEventListener('mousemove',mov);
34
　　},10);　　//这里可以写成零（主要是判断大致mov函数取样一次的事件-如果没有复杂并且耗时的操作 实测写成0就可以）
35
},500)　　//这里时间是定时取样的时间间隔　　如果时间太短会在运行过程中停一段时间（注：这里没有改进，我换成了其他效果，具体原因未深究）
36
}
37
mymov();

最后

以上就是淡定溪流为你收集整理的监听鼠标移动事件mousemove的定时取样的全部内容，希望文章能够帮你解决监听鼠标移动事件mousemove的定时取样所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。