【笔记】获取鼠标信息

发表于 更新于 阅读次数：

前言

JS通过事件对象获取鼠标信息

编写一个事件用于测试

  • 编写一个鼠标移动事件
1
2
3
4
document.onmousemove = function(event){
  let e = event || window.event;
  ...
}

获取鼠标位置

鼠标在电脑屏幕的位置

  • 获取根据电脑屏幕左上角为原点的鼠标位置
1
2
e.screenX
e.screenY

鼠标在页面中的位置

  • 获取根据网页页面左上角为原点的鼠标位置
  • 如果滚动条滑动，坐标原点位置会发生改变
1
2
e.pageX
e.pageY

鼠标在浏览器客户端的位置

  • 获取浏览器可视区域左上角为原点的鼠标位置
  • 如果滚动条滚动，坐标原点位置不会发生改变
1
2
e.clientX
e.clientY

鼠标在页面中的相对位置

  • 获取根据网页中鼠标位置所指定的元素左上角为原点的鼠标位置，坐标原点会随着当前鼠标位置所指定的元素变化而变化
1
2
e.offsetX
e.offsetY

完成

参考文献

哔哩哔哩——web前端小清风