鼠标事件MouseEvent对象的一些坐标属性总结

最新推荐文章于 2025-09-19 12:03:44 发布

原创最新推荐文章于 2025-09-19 12:03:44 发布 · 3.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js

这篇博客总结了MouseEvent对象中与坐标相关的属性，包括clientX, clientY, offsetX, offsetY, pageX, pageY, screenX和screenY。这些属性用于描述用户在鼠标交互时的位置信息，例如点击或移动时的位置相对于可视区域、目标元素、页面和屏幕的坐标。" 130638844,10963529,WebGIS中地方坐标系数据加载方案,"['GIS开发', '坐标转换', 'Web开发', 'arcgis']

MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown。

MouseEvent 派生自 UIEvent，UIEvent 派生自 Event. 如下图所示.

在这里插入图片描述
写一段代码

<style>
* {
  padding: 0;
  margin: 0;
}

div {
  width: 100px;
  height: 100px;
  background-color: #f78;
  border: 2px solid #b2b2b2;
  margin: 50px auto;
}
</style>
<div></div>

var div = document.querySelector('div')

div.addEventListener('click', clickHandler)

function clickHandler(e) {
	// 这里的 e 其实就是一个 MouseEnevt 对象
  console.log(e);
}

当我们点击 div 的时候，就会打印 MouseEvent 对象 ,以下框起来的属性就是坐标相关的属性啦。

在这里插入图片描述

clientX、clientY、x、y

返回当前点击的位置到可视区域的顶部和左侧的距离

function clickHandler(e) {
  console.log(e.clientX, e.clientY);
}

在这里插入图片描述
x、y 是 MouseEvent.clientX 和 MouseEvent.clientY 的别名. 所以是和他俩一样一样的.

offsetX、offsetY

相对于目标元素e.target 的左上角距离

var div = document.querySelector('div')
div.addEventListener('click', clickHandler)
function clickHandler(e) {
  console.log(e.offsetX, e.offsetY);	
}

在这里插入图片描述

pageX、pageY、screenX、screenY

pageX、pageY 是相对于页面左上角的距离
screenX、screenY 是相对于屏幕左上角的距离

console.log(e.pageX, e.pageY);
console.log(e.screenX, e.screenY);

在这里插入图片描述

鼠标事件MouseEvent对象的一些坐标属性总结

clientX、clientY、x、y

offsetX、offsetY

pageX、pageY、screenX、screenY

1 条评论