html鼠标各种坐标,HTML坐标系与鼠标事件坐标

HTML坐标系与鼠标事件坐标

在开发中处理鼠标事件时，经常会碰到 offset、scroll、client 这几个关键字，每次处理页面元素的坐标和偏移前，都要网上去搜资料，还会踩一些坑，影响开发效率。这里总结一下，一劳永逸。

一、图解HTML的四个坐标系统

HTML有四个常见的坐标系统：screen，page，client和offset，用于描述DOM元素的Box尺寸和MouseEvent中的位置。

如下图所示：

1. screen坐标系

参照点：用户显示器屏幕左上角。

screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量。

screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量。

screen坐标的最大范围是 (screen.width, screen.height)，最大值不会超过屏幕分辨率。

补充：

// 屏幕宽度。

screen.width

// 屏幕高度。

screen.height

// 屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度，可表示为浏览器最大化时的宽度。

screen.availWidth

// 屏幕可用高度。即屏幕高度减去上下任务栏后的高度，可表示为浏览器最大化时的高度。

screen.availHeight

// 任务栏高/宽度。如：任务栏高/宽度