clientX, clientY | offsetX, offsetY | pageX, pageY的区别：

✍ clientX, clientY：指的是鼠标点击位置距离可视窗口的坐标；

图示：在不拉滚动条的情况下

在拉滚动条的情况下：还是点击位置距离可视窗口左上角的距离

✍ pageX, pageY：指的是距离页面左上角的距离，就是当你拉滚动条时，距离值也不变

图示：当你没拉滚动条时，此时点击页面左上角也就是窗口的左上角，所以当你没拉滚动条，距离就是下面图的距离；但是当你拉了滚动条，页面也就上去了，此时页面左上角不等于窗口左上角，而这个pageX, pageY是距离页面左上角的距离，当你点击同一个位置，这个坐标是不变的。

✍ offsetX, offsetY：距离触发元素左上角的坐标值

图示：

clientX, clientY | offsetX, offsetY | pageX, pageY的区别：相关推荐

【鼠标事件 MouseEvent】clientX clientY offsetX offsetX pageX screenX screenY
鼠标事件 MouseEvent 对象,下clientX clientY offsetX offsetX pageX screenX screenY 定义转自 MDNMouseEvent MouseEv ...
研究MouseEvent中的clientX、offsetX、pageX、screenX
很多时候需要在鼠标点击的时候获取点击的坐标来处理一些逻辑,有时候clientX.offsetX.pageX用的也不清楚,特此做了一个实验来记录. 1.含义 clientX 提供应用程序客户区域内发生事 ...
区分clientX、offsetX、pageX、screenX
以前一直以为写了这几个属性的区分的,今天再来看居然没有写. 不过这个还是很有用的.这里再来总结一下. 所有解释都在图里面.这里再来文字解释一下,图中至标注了Y的值,X同理. clientX clien ...
JS clientX、offsetX、pageX、screenX
因为要写拖拽.拉伸,所以去查了有关这方面的博客,然后发现每一篇博客说的都不一样...,我的这篇博客是按照我自己的理解来解释的,有错误的话,欢迎指正[我也不能肯定100%正确] 一:图形解释二:书面解 ...
js中clientX，offsetX，pageX，screenX图示
1.clientX,clientY 属性名解释 clientX 事件触发时的相对于视口的水平坐标.MouseEvent.x 是 MouseEvent.clientX 属性的别名 clientY 事件 ...
pageX/pageY、clientX/clientY、screenX/screenY的区别
在触发鼠标事件的时候会传一个event参数,在这个参数中我们可以获得pageX/pageY.clientX/clientY.screenX/screenY,但是这几个属性有啥区别呢?看下图 scree ...
clientX,clientY,screenX,screenY,offsetX,offsetY 区别测试
clientX:当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等),鼠标相对于浏览器(这里说的是浏览器的有效区域)x轴的位置: clientY:当鼠标事件发生 ...
JavaScript中pageX pageY offsetX offsetY区别
IE下没有pageX,pageY这两个属性 pageX pageY:鼠标指针的位置,文档的坐标. offsetX offsetY:鼠标相对于事件源元素的x,y坐标
JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反 ...

clientX, clientY | offsetX, offsetY | pageX, pageY的区别：

clientX, clientY | offsetX, offsetY | pageX, pageY的区别：相关推荐

最新文章

热门文章