新手请教前端的一些问题
0
悬赏园豆：100
[已解决问题]
解决于 2020-05-08 16:39
var cirDiv = document.querySelector('#cir');
var speedx = 0, speedy = 0;
var lastx = 0, lasty = 0;
cirDiv.onmousedown = function (e) {
var evt = e || window.event;
var x = evt.clientX -cirDiv.offsetLeft;
var y = evt.clientY - cirDiv.offsetTop;
document.onmousemove = function (e1) {
var evt = e1 || window.event;
cirDiv.style.left = evt.clientX - x + 'px';
cirDiv.style.top = evt.clientY - y +'px';
speedx = evt.clientX - x - lastx;
speedy = evt.clientY - y - lasty;
lastx = evt.clientX - x;
lasty = evt.clientY - y;
}
}
谁能帮忙解释下这个speedx speedy的值是怎么来的的 不应该为0么 萌新 求教了
问题补充：
我的意思是lastx = evt.clientX - x;
speedx = evt.clientX - x - lastx;
计算过后结果应该是0 啊
最佳答案
0
var evt = e1 || window.event;
cirDiv.style.left = evt.clientX - x + 'px';
cirDiv.style.top = evt.clientY - y +'px';
speedx = evt.clientX - x - lastx;
speedy = evt.clientY - y - lasty;
lastx = evt.clientX - x;
lasty = evt.clientY - y;
这里为什么speedx不为0？
因为evt，即mouseMove事件，并非一成不变的，当你移动鼠标时，每次触发的evt对应是当前鼠标的位置，其clientX和clientY也是随着鼠标移动而变化的。
而lastx记录的是上一次鼠标位置计算的结果，并不是当前evt.clientX的值了。
譬如：
T0时刻，鼠标位置为(100,200)，当前位置X/Y分别为100,200，而 lastx=0,lasty=0;
T1时刻，鼠标移动到(500,800), 当前位置X/Y分别为500,800,而lastx=100,lasty=200;
T2时刻，鼠标移动到（300,,600）,当前位置X/Y分别为300,600，而 lastx=500,lasty=800
....
收获园豆：100
是不是可以理解成这样：这个speed的值是程序执行的时候，因为先后顺序有时间差异造成的。就是说上一条代码执行到下一条代码执行有时间差，而在这个时间差内mouseMove的变化导致了数值的差就是speed的值。 我这样理解对么？请教！！！
@花满楼11: 对，简单的来说就是你理解的这样子：
把当前鼠标位置，和上一次鼠标位置做差值，就是speed。
不过实际上这个onMouseMove这样用很危险的，因为鼠标一直移动，一直触发这个事件，很耗费cpu的。。
@。淑女范erり: 谢谢了 懂了
其他回答(1)
1
speedx = evt.clientX - x - lastx;
speedy = evt.clientY - y - lasty;
这来的
我的意思是lastx = evt.clientX - x;
speedx = evt.clientX - x - lastx;
计算过后结果应该是0 啊
@花满楼11:
speedx = evt.clientX - x - lastx=evt.clientX - (evt.clientX -cirDiv.offsetLeft) - lastx
speedx = evt.clientX - x - lastx=evt.clientX - evt.clientX + cirDiv.offsetLeft - lastx
speedx = evt.clientX - x - lastx= cirDiv.offsetLeft - lastx
