pageX/pageY:
鼠标相对于整个页面的X/Y坐标。
注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了。
特别说明:IE不支持!
clientX/clientY:
事件发生时鼠标在浏览器内容区域的X/Y坐标(不包含滚动条)。
浏览器内容区域即浏览器窗口中用来显示网页的可视区域,注意这个可视,也就是说需要拖动滚动条才能看到的区域不算。
当你将浏览器窗口缩小时,clientX/clientY的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域。
特别说明:IE下此属性不规范,它们的最小值不是0而是2,也就是说IE下的clientX/clientY比火狐下始终大2px。
screenX/screenY
鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率。
offsetX/offsetY:
得出的结果跟pageX/pageY一样,既然如此,它有什么存在价值?因为:
特别说明:只有IE支持!相当于IE下的pageX,pageY。

e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft = e.pageX
e.clientY + document.documentElement.scrollTop  - document.documentElement.clientTop = e.pageY

 
 

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

  1. pageX, clientX ,screenX, offsetX, layerX, ,x的区别

    事件对象event的位置属性,这些参数比较容易混淆 1. pageX,pageY :IE不识别的,鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化,其实就是clientY ...

  2. event对象中offsetX,clientX,pageX,screenX的区别

    1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...

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

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

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

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

  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. offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

    一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...

随机推荐

  1. SonarQube代码质量管理平台比较好的搭建和使用资料

    http://www.voidcn.com/blog/lidujun1028/article/p-3831235.html   Sonar (SonarQube)是一个开源平台,用于管理源代码的质量. ...

  2. QT修改默认的滚动条样式

    这几天写一个类似于悬浮窗的小程序,可是qt自带的滚动条实在难看,经过多番查找终于找到一个类似于qq聊天窗口的滚动条,废话不说上代码.希望能帮到大家 1.写入到文件中,新建个xx.qss,然后复制一下内 ...

  3. IDL 遍历 XML文档示例

    IDL解析XML文档同样也有2种方法:DOM和SAX方式:两种方法在IDL自带的帮助里面有详细介绍,可以去查看. IDL 源码PRO sample_recurse, oNode, indent COM ...

  4. EF5修改edmx表结构保存后不自动更新tt (转)

    http://blog.csdn.net/panderman/article/details/8172968 不知道这算不算一个bug,当你新建一个从数据库生成的edmx时,他能正确的生成所有的tt文 ...

  5. Apache的安装

    Apache的安装: 注:本例只截取需要注意的截图,其它默认则不显示. 1.       服务器信息可以按照默认配置,如果服务器的80端口没被其他服务器程序占据.可选“for All Users,on ...

  6. tps,qps

    http://blog.itpub.net/22664653/viewspace-767265/

  7. iOS开发中控制器切换方式Modal

    简介 在iPhone开发中 Modal是一种常见的切换控制器的方式 默认是从屏幕底部往上弹出,直到完全盖住后面的内容为止 在iPad开发中 Modal的使用频率也是非常高的 对比iPhone开发,Mo ...

  8. 近期用过的Linux口令备份

    最近使用Ubuntu用到的一些口令: rm -rf directory 移除文件夹或者文件touch (create file)mkdirmv(move,rename)chown (change ow ...

  9. PAT (Advanced Level) 1045. Favorite Color Stripe (30)

    最长公共子序列变形. #include<iostream> #include<cstring> #include<cmath> #include<algori ...

  10. 手把手教你使用startuml画用例图

    转自:http://www.2cto.com/os/201502/377091.html 最近准备研究下volley的源码,但看了网上一些大牛的博客都是配合图这样看起来更直观,分析起来逻辑也很好,什么 ...