检测鼠标方向 - JavaScript

Question

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;
}

这是我检测鼠标方向的方法，它在Chrome上效果很好，但只能在Chrome上使用，请问如何使其兼容其他浏览器（如Firefox、Opera和至少ie8+或ie9+）。 请勿使用jQuery。

- CRQ

Answer 1

坚持使用 pageX 并在更高的作用域中定义 oldx，否则它始终为零。

var direction = "",
    oldx = 0,
    mousemovemethod = function (e) {

        if (e.pageX < oldx) {
            direction = "left"
        } else if (e.pageX > oldx) {
            direction = "right"
        }

        oldx = e.pageX;

}

演示代码

- adeneo

---

非常感谢您解决了旧的问题，我一直在想为什么它不能与pageX一起工作... - CRQ

Answer 2

鼠标移动-向左、向右、向上、向下- 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);

- Thangaraj

Answer 3

let direction = "";
if (e.movementY > 0 && e.movementX == 0) {
    direction = "down";
  } else if (e.movementY < 0 && e.movementX == 0) {
    direction = "up";
  } else if (e.movementX > 0 && e.movementY == 0) {
    direction = "right";
  } else if (e.movementX < 0 && e.movementY == 0) {
    direction = "left";
  }

- mh. bitarafan

---

我只需要在X方向上的移动，而 e.movementX > 0 表示向右移动， < 0 表示向左移动，正好符合我的需求。我认为这应该是被选中的答案，因为在2021年它在所有主要浏览器上都得到了完全支持。谢谢。 - aderchox

Answer 4

这段代码将会给你'X'和'Y'方向上的'direction'并存储在directionX和directionY变量中，同时还会计算出'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);

- Jaskaran Singh

Answer 5

您不需要跟踪旧位置。

   e.clientX - window.innerWidth/2 > 0 ? 'right' : 'left'
   e.clientY - window.innerHeight/2 > 0 ? 'bottom' : 'top'

- Leigh Cheri