该博客详细介绍了如何通过JavaScript的mousedown和mouseup事件来跟踪鼠标移动，计算移动距离和用时，以判断鼠标移动的方向。文章涉及到了移动的最小像素阈值、最大允许时间以及如何根据坐标变化确定移动路径，包括从右到左、从左到右、从下到上和从上到下的判断。此外，还提及了当移动距离过短或用时过长时不触发特定事件的情况。
我说下思路，首先通过 mousedown事件(A)记录当前鼠标的位置。再得到当前的时间戳。
接着通过mouseup事件(B)再得到当前鼠标的坐标，同样也得到当前的时间戳。
大概逻辑：
定义
移动移动最小像素 p;
最多移动用时 s (毫秒)
计算
移动用时 = 事件(B)得到的时间 - 事件(A)得到的时间
x轴 移动的距离 = abs(事件A x坐标 - 事件B x坐标)
y轴 移动的距离 = abs(事件A y坐标 - 事件B y坐标)
移动方向x： 事件A x坐标 - 事件B x坐标 > 0 初步判断是从右到左r2l 反正l2r
移动方向y： 事件A y坐标 - 事件B y坐标 > 0 初步判断是从下到上d2u 反正u2d
确定移动方向 ：
if(x轴 移动的距离 >= p && y轴 移动的距离 >= p) {
if(x轴 移动的距离 > y轴 移动的距离){
确定移动方向 = 移动方向x
}else{
确定移动方向 = 移动方向y
}
}else if(x轴 移动的距离 >= p && y轴 移动的距离 < p) {
确定移动方向 = 移动方向x
}else if(x轴 移动的距离 < p && y轴 移动的距离 >= p){
确定移动方向 = 移动方向y
}else {
//不符合触发事件的条件 移动太距离太短了
}
判断移动用时：
if(移动用时 > s) {
//不符合触发条件 移动太缓慢
return;
}
最终执行：
switch(确定移动方向) {
case 'r2l' :
//右到左 程序
break;
case 'l2r' :
//左到右 程序
break;
case 'd2u' :
//下到上 程序
break;
case 'u2d' :
//上到下 程序
break;
}
当然这样也只是简单的判断 四个方向的鼠标事件。
1271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
