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.
Stick with pageX
and define oldx
in a higher scope, otherwise it's always zero
var direction = "",
oldx = 0,
mousemovemethod = function (e) {
if (e.pageX < oldx) {
direction = "left"
} else if (e.pageX > oldx) {
direction = "right"
}
oldx = e.pageX;
}
FIDDLE
on mouse move - to left, to right, to up, to down - 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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With