在这一篇文章中，将会介绍鼠标坐标、元素坐标以及鼠标在指定元素内的坐标。

1. 鼠标坐标

在触发鼠标相关事件时(如：click、mousemove)，可以通过事件对象获取当前鼠标的坐标。

获取的坐标可分为2种：

1) MouseEvent.screenX、MouseEvent.screenY ：基于屏幕的X、Y坐标；以屏幕的左上角为0,0起始点。

2) MouseEvent.clientX、MouseEvent.clientY ：基于body的X、Y坐标；以当前body的左上角为0,0起始点，若body含有水平滚动条或垂直滚动条时，左上角还是0,0坐标点。

2. 元素的坐标

元素的getBoundingClientRect()方法可获取一个 ClientRect 对象，其描述了元素的方位和宽高等信息。

2.1 ClientRect对象属性

属性名称	属性说明
width	元素的宽度
height	元素的高度
left	元素左上角距离当前可视body的宽度
top	元素左上角距离当前可视body的高度
right	元素右下角距离当前可视body的宽度；right = left + width
bottom	元素右下角距离当前可视body的高度；bottom = top + height

2.2 图示

2.3 其他坐标

除了这些直接属性外，还可以结合其他元素获取更详细的坐标：

1) 元素左上角在整体body的水平坐标 = document.body.scrollLeft + element.getBoundingClientRect().left;

2) 元素左上角在整体body的垂直坐标 = document.body.scrollTop + element.getBoundingClientRect().top;

3. 鼠标在元素内的坐标

通过之前学到的获取鼠标坐标和元素坐标后，还可进一步获取鼠标在元素内的坐标。

以鼠标在元素内的x坐标为例，等于鼠标的 clientX 减去元素的getBoundingClientRect()放的left，最后在加上元素的scrollLeft的值。

公式如下：

x = mouse.clientX - element.left + element.scrollLeft

y = mouse.clientY - element.top + element.scrollTop

示例

End

Web开发之路系列文章

菜单加载中...

转载于:https://www.cnblogs.com/polk6/p/6624779.html

HTML 鼠标坐标和元素坐标相关推荐

网页元素坐标表示及坐标计算方法
一.页面元素坐标种类根据DOM的鼠标事件(参见https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent),浏览器响应鼠标事件时,会上报四 ...
vue 获取元素在浏览器的位置_JavaScript获取窗口位置和元素坐标（兼容版）
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript ...
[607]appium根据屏幕大小滑动界面|通过坐标定位元素
文章目录 appium根据屏幕大小滑动界面通过坐标定位元素 appium根据屏幕大小滑动界面 driver.get_window_size() 获取屏幕的宽.高: driver.swipe() 从坐 ...
PYTHON鼠标记录器一个简单的鼠标记录器可以修改坐标和点击的时间
PYTHON鼠标记录器一个简单的鼠标记录器可以修改坐标和点击的时间. 差一个定时器,如果加上定时器,估计就是解放了守在电脑边的你. 定时器版本忘了放在哪里了.先分享这个给对编程爱好的朋友,虽然我在 ...
地图绘制边界。高德。PPMAP。鼠标点击经纬度坐标。地图图标点点击弹窗窗口。地图图标点点击事件。
边界: == 第一种:绘制边界. 通过绘制多边形的API来绘制边界. 高德API:多边形 Polygon. 矢量图形-覆盖物-教程-地图 JS API | 高德地图API 将关键的边界轮廓经纬度坐标 ...
创建maven项目时，maven坐标的元素GroupID、ArtifactID、Version、Packaging等什么意思，如何写？
新手创建一个maven管理的项目时,会遇到不知道GroupID.ArtifactID怎么填写认识模糊的问题,做个简单说明: 1.GroupId(Group): 项目所属组织的唯一标识符,对应项目中ja ...
求出N×M整型数组的最大元素及其所在的行坐标及列坐标（如果最大元素不唯一，选择位置在最前面的一个）。
功能:求出N×M整型数组的最大元素及其所在的行坐标及列坐标(如果最大元素不唯一,选择位置在最前面的一个). 例如:输入的数组为: 1 2 3 4 15 6 12 18 9 10 11 2 求出的最 ...
matplotlib 鼠标拖动坐标图像/鼠标滑轮放大缩小坐标图像
分享一下关于matplotlib 鼠标拖动坐标图像/鼠标滑轮放大缩小坐标图像的代码先看效果: 1.鼠标左键拖动坐标图像 # 鼠标左键拖拽事件 self.lastx = 0 # 获取鼠标按下时的坐标X ...
使用小技巧教你用Selenium获取鼠标指向的元素
有一个同学在Gne的群里面咨询如何通过Selenium获取当前鼠标指向的元素,在我讲了方法以后,他过了两天又来问: 那么,我今天就来写一篇文章,具体说说应该怎么操作. 这个方法的核心,是借助JavaS ...

HTML 鼠标坐标和元素坐标