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. 学习笔记——桥接模式Bridge

    桥接模式的目的是在设计初,就将实现与接口分离,在以后实现发生变化时,只需要改变传递的实现对象,在保持接口一致的情况,达到实现的变更. 在OperationInterface中就调用实现的方法imp.O ...

  2. Linux学习 -- Shell基础 -- Bash变量

    变量 默认是字符串型,数值型需要显示指定 等号两侧都不能有空格 单引号:原始字符串  双引号:保留转义 命令结果作为值:反引号 或 $() 环境变量一般用大写 自定义变量 变量定义    name=& ...

  3. elasticearch 安装

    1.elasticsearch需要安装jdk1.7以上 2.在ubuntu下不能以root运行,需要建立专门账号 添加组 root@ubuntu:~/Downloads/elasticsearch-/ ...

  4. android 5.0

    google 2014开发大会发布了全新的设计语言Material Design,并计划将其应用到Android.Chrome OS和网页等平台上,而最新发布的Android L系统就采用了这种设计语 ...

  5. PAT (Advanced Level) 1112. Stucked Keyboard (20)

    找出一定没问题的字符(即一连串的额字符x个数能被k整除的),剩下的字符都是可能有问题的. #include<cstdio> #include<cstring> #include ...

  6. Servlet程序开发-Helloworld

    D:\Workspace\WEB-INF\classes下新建HelloServlet.java文件: package org.lxh.servletdemo ; import java.io.* ; ...

  7. github 教程

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/

  8. C#获取客服端ip和用户名

    . 在asp.Net中专用属性: 获取服务器电脑名:page.server.manchinename 获取用户信息:page.user 获取客户端电脑名:page.request.userhostna ...

  9. linux 备份系统

    切换到root用户 切换到根目录 tar cvpzf backup.tgz --exclude=/proc --exclude=/lost+found --exclude=/backup.tgz -- ...

  10. openwrt系统之字符设备驱动软件包加载、测试程序加载

    .首先将软件包(如mydrv)放到ubuntu虚拟机openwrt/trunk/package/kernel/目录下 .回到openwrt/trunk/目录下,make menuconfig进行配置, ...