pageX与offsetX的区别
screenX:鼠标在显示屏幕上的坐标。
clientX:鼠标在页面显示区域的坐标。
注:以上两个都是各浏览器通用的。
pageX:FF特有,鼠标在页面上的位置,从页面左上角开始定位,这个可以很方便在整个页面上进行定位,IE没有直接替换的属性。
layerX:FF特有,鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从border的左上角开始定位,即如果这个父元素存在border,则坐标原点在border的左上角,而不是内容区域的左上角。
offsetX:IE特有,鼠标相对于“触发事件的元素”的位置,从内容区域左上角开始定位,不是从border左上角开始!这个属性比较好用,用来判断鼠标点在一个元素中的哪个位置很方便,FF没有直接替换的属性。
x:IE特有,跟layerX一个效果,可作为layerX的直接替换属性。
注:IE和FF的定位有个1px的差别,实际上,IE的定位从0开始,FF的定位从1开始,FF永远会比IE大1px,需要根据实际情况处理。
offsetLeft:这个属性不是事件对象的属性,而是DOM对象所有的,该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的,设置了position的父对象”中的位置,虽然话是这么说的,但是不同的浏览器效果不一样,FF中严格按上述说明执行,但是在IE6/7中,这个属性返回该DOM对象在其直接父对象中的位置,但是IE8改正了这个问题,不过IE8又有了一个新问题,其他的浏览器都是从父对象的内容区域的左上角开始定位,IE8确是从父元素的border的左上角开始定位,由于测试环境为IETester中的IE8,不能排除是IETester的问题。
pageX与offsetX的区别相关推荐
- JavaScript中pageX pageY offsetX offsetY区别
IE下没有pageX,pageY这两个属性 pageX pageY:鼠标指针的位置,文档的坐标. offsetX offsetY:鼠标相对于事件源元素的x,y坐标
- clientX,screenX,pageX,offsetX的区别
前言 关于clientX,screenX,pageX,offsetX的区别之前也比较迷糊,然后自己写了几个demo算是弄明白了,在这记录一下. 定义 一.clientX.clientY 点击位置距离当 ...
- pageX,clientX,offsetX,layerX的区别
在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个 ...
- e.pageX、e.clientX、e.screenX、e.offsetX的区别以及元素的一些CSS属性
e.pageX,e.pageY:返回的值是相对于文档的定位,文档的左上角为(0,0),向右为正,向下为正,IE不支持(不包含上方工具栏):e.clientX,e.clientY:返回的值是相对于屏幕可 ...
- pageX clientX offsetX之间的区别
鼠标在页面中的定位有pageX pageY clientX clientY offsetX offsetY等,总是分不清楚这几个之间有什么区别,写一篇文章作为备忘录 clientX和clie ...
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
- screenX,clientX,pageX,offsetX,的区别
2019独角兽企业重金招聘Python工程师标准>>> event.screenX.event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标.标准事件和IE事件都定义了 ...
- 图解事件坐标screenX、clientX、pageX, offsetX的区别
一.图解 如图所示,假设页面中灰色圆点是鼠标点击处,黄色区域是鼠标触发事件对象 二.概念 1.screenX 和screenY 参照点:电脑屏幕左上角 screenX:鼠标点击位置相对于电脑屏幕左上角 ...
- 事件参数screenX、pageX、clientX 、offsetX的区别
1.screenX 和screenY 参照点:电脑屏幕左上角 screenX:相对于电脑屏幕左上角的水平偏移量 screenY:相对于电脑屏幕左上角的垂直偏移量 2.pageX和pageY 参照点:网 ...
最新文章
- Bzoj2141: 排队
- 卡巴斯基:远程工具Ammyy Admin被用来盗取银行账户
- 处理机调度实验总结_计算机系统结构总结
- 【收藏】为什么在Scala中可以在运行时将AnyVal转换为AnyRef?AnyVal转换为AnyRef
- 为什么计算机能听懂人的指令,为什么计算机有听懂命令的能力?
- 如何在Timeline中使用Cinemachine?
- 思科(Cisco)路由器常用命令总结
- BET365的websocket实时数据采集分析
- pandas获取全部列名_Pandas 整理列名
- UAC 管理员权限 程序 防止弹窗的四种解决办法
- 【优秀课设】基于OpenCV+MediaPipe的手势识别(数字、石头剪刀布等手势识别)
- 自学无果 报班学习的每日知识点总结与回顾 0基础学前端的小伙伴可以进来看看 一起学习一起进步(三)
- 我胡汉三又回来了之拼多多笔试复盘
- 自定义listview和ProgressBar的简单使用
- .vip域名是什么?
- 【看表情包学Linux】冯诺依曼架构 | 理解操作系统 | 基于 Pintos 实现新的用户级程序的系统调用
- UVA1600 巡逻机器人 Patrol Robot
- 数据结构更新中...
- 计算机教师教育笔记,信息技术教师的读书笔记
- Open Images Dataset V5 - Data Formats - Class Names
热门文章
- COLA 4.0 - DDD项目实践
- 计算机二级试题word,计算机二级考试word试题及答案.doc
- php取word表格一行内容,如何提取出word表格中的内容 值得一看
- day75,爬虫02,webmagic入门程序,组件介绍:Downloader,PageProcess,pipeline,Scheduler,51jop招聘网站综合案例
- 解决无公网IP,远程访问黑群晖NAS
- 信息增益,信息增益率,Gini
- 媒体报道 | 《数据安全治理自动化技术框架(DSAG)》白皮书诞生,探索数据安全治理技术“最优解”
- Oracle错误一览表4
- matlab bsxfun memory,matlab – BSXFUN关于关系操作的内存效率
- android 涨潮动画加载_潮汐app怎么使用?潮汐app各功能测评介绍