检测鼠标方向 - JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24294452/
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
Detect mouse direction - JavaScript
提问by CRQ
var direction = ""
var mousemovemethod = function (e) {
var oldx = 0;
if (e.movementX < oldx) {
direction = "left"
} else if (e.movementX > oldx) {
direction = "right"
}
oldx = e.pageX;
}
This is how I detect the mouse direction and it works so good but it works only on Chrome, how I can make this compatible with other browsers (Firefox, Opera and at least ie8+ or ie9+). No jQuery please.
这就是我检测鼠标方向的方式，它运行良好，但仅适用于 Chrome，我如何使其与其他浏览器（Firefox、Opera 和至少 ie8+ 或 ie9+）兼容。请不要使用jQuery。
回答by adeneo
回答by Thangaraj
on mouse move - to left, to right, to up, to down - javascriptFIDDLE
鼠标移动 - 向左、向右、向上、向下 - javascript FIDDLE
var direction = "";
var oldx = 0;
var oldy = 0;
mousemovemethod = function (e) {
if (e.pageX > oldx && e.pageY == oldy) {
direction="East";
}
else if (e.pageX == oldx && e.pageY > oldy) {
direction="South";
}
else if (e.pageX == oldx && e.pageY < oldy) {
direction="North";
}
else if (e.pageX < oldx && e.pageY == oldy) {
direction="West";
}
document.body.innerHTML = direction;
oldx = e.pageX;
oldy = e.pageY;
}
document.addEventListener('mousemove', mousemovemethod);回答by Jaskaran Singh
This code will give you the 'direction' of 'X' and 'Y' in directionX and direction Y variable and the distance traveled by 'X' and 'Y' axis.
此代码将为您提供方向 X 和方向 Y 变量中“X”和“Y”的“方向”以及“X”和“Y”轴行进的距离。
let oldX = 0, oldY = 0;
function captureMouseMove($event){
let directionX = 0, directionY = 0, diffX = 0, diffY = 0;
if ($event.pageX < oldX) {
directionX = "left"
diffX = oldX - $event.pageX;
} else if ($event.pageX > oldX) {
directionX = "right"
diffX = $event.pageX - oldX;
}
if ($event.pageY < oldY) {
directionY = "top"
diffY = oldY - $event.pageY;
} else if ($event.pageY > oldY) {
directionY = "bottom";
diffY = $event.pageY - oldY;
}
oldX = $event.pageX;
oldY = $event.pageY;
}
window.addEventListener('mousemove', captureMouseMove);
