区分event对象中的[clientX,offsetX,screenX,pageX]

2024-05-12 01:03:10

前言

在平时的开发中，非常讨厌的就是兼容性了，兼容性的问题总会让我们记忆混淆，所以这次来区分一下event对象中的常用获取鼠标位置。

clientX clientY

event.clientX
event.clientY

client直译就是客户端，客户端的窗口就是指游览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。

event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。

client范围

兼容性：IE和主流游览器都支持。

offsetX offsetY

event.offsetX
event.offsetY

offset意为偏移量，是被点击的元素距左上角为参考原点的长度，而IE、FF和Chrome的参考点有所差异。

Chrome下，offsetX offsetY是包含边框的，如图所示。

chrome下的offset参考点

而IE、FF是不包含边框的，如果鼠标进入到border区域，为返回负值，如图所示。

IE、FF下的offset参考点

兼容性：IE9+,chrome,FF都支持此属性。

screenX screenY

event.screenX
event.sreenY

screen顾名思义是屏幕，是用来获取鼠标点击位置到屏幕显示器的距离，距离的最大值需根据屏幕分辨率的尺寸来计算。

兼容性：所有游览器都支持此属性。

pageX pageY

event.pageX
event.pageY

page为页面的意思，页面的高度一般情况client游览器显示区域装不下，所以会出现垂直滚动条。

鼠标距离页面初始page原点的长度。

在IE中没有pageX、pageY取而代之的是event.x、evnet.y。x和y在webkit内核下也实现了，所以火狐不支持x，y。

兼容性：IE不支持，其他高级游览器支持。

转自区分event对象中的[clientX,offsetX,screenX,pageX] - 简书

区分event对象中的[clientX,offsetX,screenX,pageX]相关推荐

一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
先总结下区别:event.clientX.event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性event. ...
html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别
1.offsetX offset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border. 2.clientX 事件对象相对于浏览器窗口可视区域的X ...
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
javascript事件与event对象的属性
javascript事件列表解说事件浏览器支持解说一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
JS-图片其他事件-Event对象-事件委托-DOM对象
JS-图片其他事件-Event对象-事件委托-DOM对象 1 回顾 1. 事件回调函数中 this 的指向2. 鼠标事件click dblclick contextmenumouseenter mou ...
Javascript的Event对象
Javascript的Event对象用来描述Javascript的事件,它主要作用于IE4和NN4以后的各个浏览器版本中.Event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态.一 ...
python并发入门（part5 event对象）
一.引入event. 每个线程,都是一个独立运行的个体,并且每个线程的运行状态是无法预测的. 如果一个程序中有很多个线程,程序的其他线程需要判断某个线程的运行状态,来确定自己下一步要执行哪些操作. ...
Day28：Event对象、队列、multiprocessing模块
一.Event对象线程的一个关键特性是每个线程都是独立运行且状态不可预测.如果程序中的其他线程需要通过判断某个线程的状态来确定自己下一步的操作,这时线程同步问题就会变得非常棘手.为了解决这些问题, ...

最新文章

热门文章