javascript - 检测光标离开屏幕中心多少像素

我正在尝试检测有多少检测光标距窗口中心的像素数。

使用JavaScript或jQuery将返回值添加到var。

如果可以附加到元素，那就更好了。因此，var会随着您的移动而更新，并且鼠标会越来越靠近元素中心点。

我什至不确定这是可能的，因此为什么没有代码。谢谢

最佳答案

这是你想要的吗？将onmousemove事件附加到窗口，并使用窗口的高度和宽度减去当前鼠标位置？

var disFromCenterX = 0,
    disFromCenterY = 0
window.onmousemove = function(e) {
  disFromCenterX = Math.abs(window.innerWidth/2 - e.pageX);
  disFromCenterY = Math.abs(window.innerHeight/2 - e.pageY);
  console.log("distance from center x: " + disFromCenterX);
  console.log("distance from center y: " + disFromCenterY);
}

元素上的逻辑相同

var disFromCenterX = 0,
   disFromCenterY = 0
document.querySelector("#div").onmousemove = function(e) {
  var rect = this.getBoundingClientRect();
  disFromCenterX = Math.abs(this.clientWidth/2 - (e.pageX - rect.left));
  disFromCenterY = Math.abs(this.clientHeight/2 - (e.pageY - rect.top));
  console.log("distance from center x: " + disFromCenterX);
  console.log("distance from center y: " + disFromCenterY);
}

#div {
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

<div id="div"></div>