js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别
来源:互联网 发布:四十部网络禁书名单 编辑:程序博客网 时间:2024/05/16 19:02
pageX:
鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,同一个元素坐标不随滑动条移动而变化
clientX:
鼠标在页面上可视区域的位置,即是以浏览器滑动条此刻的滑动到的位置为参考点,同一个元素坐标随滑动条移动而变化.
注:
1、如果元素位于body中,e.clientX + document.body.scrollLeft - document.body.clientLeft = e.pageX,
2、e.clientX包括了body的边框,document.body.scrollLeft也包括了body边框,body表框运算重复,减去document.body.clientLeft,即去掉重复的body边框
screenX:
获取到的是触发点相对显示器屏幕左上角的距离,不随页面滚动或浏览器移动而改变
offsetX:
获取到的是鼠标触发点相对于目标事件元素(被触发DOM)左上角的距离(确切的说是到边框外边界的距离),其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左上角为基准点。
layerX:
获取到的是鼠标触发点相对于offsetParent元素左上角的距离(确切的说是到边框外边界的距离),包括中间所有元素的padding、margin、border及元素宽度值之和),其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左上角为基准点。
注:关于offsetParent元素
1、如果当前元素的祖先元素没有进行CSS定位(position为absolute或relative),offsetParent为body。
2、如果当前元素的祖先元素(包括当前元素)中有CSS定位(position为absolute或relative),offsetParent取最近的那个祖先元素(包括当前元素)。
总结:
1、使用pageX获取带滚动条的到页面边缘尺寸
2、使用clientX获取到浏览器可是区域的尺寸,没有滚动条,pageX == clientX
3、使用screenX获取到屏幕边缘尺寸
4、使用offsetX获取到当前元素边缘尺寸
5、使用layerX获取到offsetParent边缘尺寸
- js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
- javascript event对象的clientX,offsetX,screenX,pageX区别
- javascript event对象的clientX,offsetX,screenX,pageX区别
- javascript event对象的clientX,offsetX,screenX,pageX区别
- 图解JavaScript event对象的clientX,offsetX,screenX,pageX区别
- offsetX, clientX, pageX, screenX, layerX,
- clientX、screenX、pageX、offsetX、layerX
- Javascript中event对象的clientX,LayerX,offsetX, pageX
- clientX,pageX,offsetX,layerX,screenX,offsetLeft区别分析
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别
- pageX、clientX、screenX、offsetX、layerX、x区别 && click && stroke/fill
- JavaScript中event对象的clientX,offsetX,screenX,pageX的区别
- 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
- 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
- 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
- USB设备驱动程序-USB Gadget Driver(三)
- App应用增量
- dos2unix/unix2dos指令在git代码管理中的使用
- CSC231 How to play a wav file in Ciscussion C
- linux下使用lnmp1.2建立ftp服务器
- js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别
- [linux]ln命令
- linux命令:ps命令
- LintCode:两两交换链表中的节点
- USB设备驱动程序-USB Gadget Driver(四)
- java安全(八)终极装备——HTTPS协议之SSL/TLS协议
- Spring Security(10)——退出登录logout
- Python的安装方法
- 移位指令