screenX、clientX、pageX, offsetX的区别

一、图解
clientY、screenY、pageY、offsetY这四者是事件对象event上的属性
如图所示：假设紫色正方形中心处是点击处，紫色区域是鼠标事件触发对象

二、概念
1.screenX和screenY

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

2.clientX和clientY

参考点：浏览器内容区域左上角
clientX：鼠标点击位置相对于浏览器可视区域的水平偏移量（不会计算水平滚动条的距离）
clientY：鼠标点击位置相对于浏览器可视区域的垂直偏移量（不会计算垂直滚动条的距离）

3.pageX和pageY

参考点：网页的左上角
pageX：鼠标点击位置相对于网页左上角的水平偏移量，也就是clientX加上水平滚动条的距离
pageY：鼠标点击位置相对于网页左上角的垂直偏移量，也就是clientY加上垂直滚动条的距离

4.screenX和screenY

参考点：触发事件对象
screenX：鼠标点击位置相对于触发事件对象的水平距离
screenY：鼠标点击位置相对于触发事件对象的垂直距离
三、事件对象参数

screenX、clientX、pageX, offsetX的区别相关推荐

screenX,clientX,pageX,offsetX,的区别
2019独角兽企业重金招聘Python工程师标准>>> event.screenX.event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标.标准事件和IE事件都定义了 ...
事件坐标：screenX,clientX,pageX,offsetX的区别
e.screenX/e.screenY: 事件发生时鼠标相对于电脑屏幕的坐标.e.screenX,e.screenY的最大值不会超过屏幕分辨率. e.clientX/e.clientY: 事件发生时鼠 ...
offsetLeft理解以及MouseEvent接口中的screenX,clientX,pageX,offsetX区别.
背景最近在做一款基于canvas的画板插件,开发过程中的画笔功能就会使用很多关于鼠标位置的属性:screenX/Y,clientX/Y,pageX/Y,offsetX/Y,以及节点offsetLef ...
clientX,screenX,pageX,offsetX的区别
前言关于clientX,screenX,pageX,offsetX的区别之前也比较迷糊,然后自己写了几个demo算是弄明白了,在这记录一下. 定义一.clientX.clientY 点击位置距离当 ...
screenX clientX pageX的区别
screenX clientX pageX概念 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟scree ...
理解screenX clientX pageX概念
先了解screenX,clientX,pageX概念 screenX: 鼠标位置相对于用户屏幕水平偏移量,而screenY就是垂直方向的,此时的参照点也就是原点是屏幕的左上角.clientX: 跟sc ...
e.pageX、e.clientX、e.screenX、e.offsetX的区别以及元素的一些CSS属性
e.pageX,e.pageY:返回的值是相对于文档的定位,文档的左上角为(0,0),向右为正,向下为正,IE不支持(不包含上方工具栏):e.clientX,e.clientY:返回的值是相对于屏幕可 ...
图解事件坐标screenX、clientX、pageX, offsetX的区别
一.图解如图所示,假设页面中灰色圆点是鼠标点击处,黄色区域是鼠标触发事件对象二.概念 1.screenX 和screenY 参照点:电脑屏幕左上角 screenX:鼠标点击位置相对于电脑屏幕左上角 ...
事件参数screenX、pageX、clientX 、offsetX的区别
1.screenX 和screenY 参照点:电脑屏幕左上角 screenX:相对于电脑屏幕左上角的水平偏移量 screenY:相对于电脑屏幕左上角的垂直偏移量 2.pageX和pageY 参照点:网 ...

screenX、clientX、pageX, offsetX的区别

screenX、clientX、pageX, offsetX的区别相关推荐

最新文章

热门文章