javascript 如何检测用户鼠标移动的距离？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8686619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I detect the distance that the user's mouse has moved?
提问by Shawn31313
I'm trying to detect the distance the mouse has moved, in pixels. I am currently using:
我试图检测鼠标移动的距离，以像素为单位。我目前正在使用：
$(document).mousemove(function(event) {
var startingTop = 10,
startingLeft = 22,
math = Math.abs(((startingTop - event.clientY) + (startingLeft - event.clientX)) + 14) + 'px';
$('span').text('From your starting point(22x10) you moved: ' + math);
});
However, I don't feel like this is the right way to do this, or is it? It doesn't feel to consistent to me.
但是，我不觉得这是这样做的正确方法，或者是吗？对我来说感觉不太一致。
Here is a demo of how it is working right now: http://jsfiddle.net/Em4Xu/1/
这是它现在如何工作的演示：http: //jsfiddle.net/Em4Xu/1/
Extra Details:
额外细节：
I'm actually developing a drag & drop plugin and I want to create a feature called distance, like draggable has it, where you have to pull your mouse a certain amount of pixels before it drags. I'm not 100% sure how to do this, so first I need to get the pixels that the mouse has moved from the startingTop and startingLeft position.
我实际上正在开发一个拖放插件，我想创建一个名为 的功能distance，例如可拖动具有它，您必须在拖动鼠标之前将鼠标拉动一定数量的像素。我不是 100% 确定如何做到这一点，所以首先我需要获取鼠标从起始顶部和起始左位置移动的像素。
Does anyone have any suggestions?
有没有人有什么建议？
采纳答案by Sergio Tulentsev
You got your math wrong. Here's improved version: http://jsfiddle.net/stulentsev/Em4Xu/26/
你的数学错了。这是改进版：http: //jsfiddle.net/stulentsev/Em4Xu/26/
$(document).mousemove(function(event) {
var startingTop = 10,
startingLeft = 22,
math = Math.round(Math.sqrt(Math.pow(startingTop - event.clientY, 2) +
Math.pow(startingLeft - event.clientX, 2))) + 'px';
$('span').text('From your starting point(22x10) you moved: ' + math);
});
回答by Sergio Tulentsev
Here's a version that meters distance that mouse travels:
这是一个测量鼠标移动距离的版本：
var totalDistance = 0;
var lastSeenAt = {x: null, y: null};
$(document).mousemove(function(event) {
if(lastSeenAt.x) {
totalDistance += Math.sqrt(Math.pow(lastSeenAt.y - event.clientY, 2) + Math.pow(lastSeenAt.x - event.clientX, 2));
$('span').text('So far your mouse ran this many pixels: ' + Math.round(totalDistance));
}
lastSeenAt.x = event.clientX;
lastSeenAt.y = event.clientY;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>回答by Motes
Came up with the something similiar to Sergio, but this will calculate disatance from the point the mouse has been held down, and like jfriend said the distance between two points,
想出了类似于 Sergio 的东西，但这将计算鼠标被按住的点的距离，就像 jfriend 所说的两点之间的距离，
d = ( (x1-x2)^2 + (y1-y2)^2 )^(1/2)
d = ( (x1-x2)^2 + (y1-y2)^2 )^(1/2)
var totalMovement = 0;
var lastX = -1;
var lastY = -1;
var startX = -1;
var startY = -1;
$(document).mousemove(function(event) {
if (startX == -1) {
return;
}
if (startY == -1) {
return;
}
totalMovement += Math.sqrt(Math.pow(lastY - event.clientY, 2) + Math.pow(lastX - event.clientX, 2));
$('span').text('From your starting point (' + startX + 'x' + startY + ') you moved: ' + totalMovement);
lastX = event.clientX;
lastY = event.clientY;
});
$(document).mousedown(function(event) {
startX = event.clientX;
startY = event.clientY;
lastX = event.clientX;
lastY = event.clientY;
});
$(document).mouseup(function(event) {
startX = -1;
startY = -1;
totalMovement = 0;
lastX = 0;
lastY = 0;
});
