JavaScript之event对象位置属性图解

在做web 开发时，总是避免不了用户与浏览器之间的交互，这个过程我们称作事件。而在这个过程我们总是需要知道一些浏览器和事件相关的信息，这篇文章我们来了解一些 JavaScript 中窗口、视口和元素大小的相关信息，这篇文章我们来熟悉一下JavaScript 中关于 event 对象的位置属性，并附上图解方便理解。
JavaScript 中的event位置属性有：offsetX、offsetY、pageX、pageY、clientX、clientY、screenX、screenY、layerX、layerY、x、y。

首先我们先看一下个浏览器对这些属性的支持情况，如下图：

image.png

图解offsetX、clientX、pageX、screenX属性

image.png

layerX、layerY图解

image.png

event.x 和 event.y 的图解

image.png

测试代码如下：

戳我博客