码迷,mamicode.com
首页 > 其他好文 > 详细

获取鼠标位置(区分event对象中的 clientX、offsetX、screenX、pageX

时间:2020-12-17 12:51:29      阅读:2      评论:0      收藏:0      [点我收藏+]

标签:target   如图所示   tor   初始   sel   显示器   off   大小   品牌   

clientX clientY

event.clientX
event.clientY

技术图片
client直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏、导航栏等等)。

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

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

 

offsetX offsetY

event.offsetX
event.offsetY

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

Chrome下,offsetX offsetY是包含边框的,如图所示。
技术图片
而IE、FF是不包含边框的,如果鼠标进入到border区域,为返回负值,如图所示。
技术图片

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

广州品牌设计公司https://www.houdianzi.com PPT模板下载大全https://redbox.wode007.com

screenX screenY

event.screenX
event.screenY

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

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

 

pageX pageY

event.pageX
event.pageY

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

鼠标距离页面初始page原点的长度。
技术图片
在IE中没有pageX、pageY,取而代之的是event.x、event.y 。x和y在webkit内核下也实现了,所以火狐不支持x,y。

获取鼠标位置(区分event对象中的 clientX、offsetX、screenX、pageX

标签:target   如图所示   tor   初始   sel   显示器   off   大小   品牌   

原文地址:https://www.cnblogs.com/Qooo/p/14124652.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!