事件对象event的位置属性，这些参数比较容易混淆

1. pageX,pageY ：IE不识别的，鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化，其实就是clientY+scrollTop，参考点是页面

2. clientX ,clientY: 鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化. 这是一个变化的，是以浏

　　　　　　　　　 览器左上角为参考点

3. screenX, screenY : 鼠标相对于屏幕的位置，跟浏览器没有关系，不管浏览器多大，是以计算机屏幕为参考点的

4. offsetX,offsetY : FF不识别的,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值,是以event对象为参考点

5. layerX,layerY : IE不识别的，如果event元素没有相对定位和绝对定位的话，相当于pageX,pageY,如果有定位属性的话，相当于border+offsetX,

6. x,y： FF不识别的，IE是相等于offsetX，chrome相等于clientX

pageX, clientX ,screenX, offsetX, layerX, ,x的区别的更多相关文章

  1. pageX,clientX,screenX,offsetX区别

    pageX/pageY:鼠标相对于整个页面的X/Y坐标.注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了.特别说 ...

  2. pageX,clientX,offsetX,layerX的区别

    pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...

  3. clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解

    clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考. Chrome下(测试版本为51.0.2704.106  ...

  4. javascript 中 x offsetX clientX screenX pageX的区别

    在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, cli ...

  5. clientX,screenX,pageX,offsetX的异同 【转载】

    首先说明一下以上对象都是指javascript中的,不包含其他语言. pageX/pageY: 鼠标相对于整个页面的X/Y坐标.注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000 ...

  6. 【clientX，offsetX，screenX】 【scrollWidth，clientWidth，offsetWidth】的区别

    一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...

  7. 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕，相对浏览器窗口，相对文档的坐标详解

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  8. pageX/pageY,screenX/screenY,clientX/clientY的差别

    pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...

  9. jQuery中 pageX,clientX,offsetX,layerX的区别

    一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0 ...

随机推荐

  1. ZOJ3784 String of Infinity(AC自动机&&强连通分量)

    题意:给你n个禁止串,然后你只能用字符表的前m个字符去写一个无限长的串,要求是不能包含禁止串,而且串在后面不能出现循环 比赛的时候想的是先建一个自动机,然后将自动机确定化,不能到达的状态全部弄出来.但 ...

  2. POJ 1305 Fermat vs. Pythagoras （毕达哥拉斯三元组）

    设不定方程:x^2+y^2=z^2若正整数三元组(x,y,z)满足上述方程,则称为毕达哥拉斯三元组.若gcd(x,y,z)=1,则称为本原的毕达哥拉斯三元组. 定理:正整数x,y,z构成一个本原的毕达 ...

  3. 学习android的博客

    http://www.cnblogs.com/hll2008/http://svn.apache.org/repos/asf/http://blog.csdn.net/chenzheng_javaht ...

  4. editplus bat语法高亮

    editplus bat语法高亮 今天需要在Windows上写批处理,因为没写过,避免关键字错误,就需要语法高亮了,editplus默认没有bat语法文件,赶紧解决. 1:到 http://www.e ...

  5. 关于SQL查询效率，100w数据，查询只要1秒

    1.关于SQL查询效率,100w数据,查询只要1秒,与您分享:机器情况p4: 2.4内存: 1 Gos: windows 2003数据库: ms sql server 2000目的: 查询性能测试,比 ...

  6. x64的调用约定

    在设计调用约定时,x64 体系结构利用机会清除了现有 Win32 调用约定(如 __stdcall.__cdecl.__fastcall._thiscall 等)的混乱.在 Win64 中,只有一个本 ...

  7. Spring中RedirectAttributes对象重定向传参

    Spring3中的FlashAttribute 为 了防止用户刷新重复提交,save操作之后一般会redirect到另一个页面,同时带点操作成功的提示信息.因为是Redirect,Request里 的 ...

  8. lintcode:颜色分类

    颜色分类 给定一个包含红,白,蓝且长度为 n 的数组,将数组元素进行分类使相同颜色的元素相邻,并按照红.白.蓝的顺序进行排序. 我们可以使用整数 0,1 和 2 分别代表红,白,蓝. 样例 给你数组  ...

  9. 跨浏览器兼容的HTML5视频音频播放器

    HTML5的video和audio标签是用来在网页中加入视频和音频的标签,在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件.而html5medi ...

  10. [vim]vim中有中文乱码

    sudo gedit /etc/vim/vimrc 在文件的最后加上 let &termencoding=&encoding set fileencodings=utf-8,gbk,u ...