1.clientX / clientY

　　相对于可视窗口左上角，不包括菜单栏与滚动条

2.pageX / pageY

　　相对于网页左上角，不包括菜单栏，包括滚动条

3.offsetX / offsetY

　　IE特有！

　　以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。

4.screenX / screenY

　　相对于屏幕左上角

pageX和clientX ,这个两个比较容易搞混,

pageX:与滚动条移动有关

clientX:与滚动条移动无关

client / page / offset / screen X / Y的更多相关文章

  1. 浅谈event.client、event.screen与event.offset

    每每看到event.client.event.screen与event.offset这几个,头都大了,今天又碰到了,特来总结下. 1.event.screenX与event.screenY. 首先,e ...

  2. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...

  3. scroll、client和offset的区别

    scroll.client和offset的区别:http://www.cnblogs.com/pcd12321/p/4448420.html

  4. 前端 ---client、offset、scroll系列

    client.offset.scroll系列   1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta c ...

  5. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  6. 4.client、offset、scroll系列

    client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域 ...

  7. screen,client,page三种确定鼠标坐标的区别和原生JS事件写法，区别于Jquery的$.on(x,y);和$.click()

    screenX clientX pageX的区别 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟scre ...

  8. JS client(X,Y)、screen(X,Y)、page（X,Y）的区别

    clientX:光标相对于当前窗口的水平位置: clientY :光标相对于当前窗口的垂直位置: screenX :光标相对于该屏幕的水平位置: screenY:光标相对于该屏幕的垂直位置: page ...

  9. client offset screen 的区别

    clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...

随机推荐

  1. [20160711][neven代码移植Windows]

    相关说明 neven代码用于人脸检测,该代码是从Android源代码中抽取出来的,可以在Linux系统下通过make命令直接进行编译,并且可以通过代码中opencv目录下的测试文件进行测试. 移植环境 ...

  2. dede 内容页文章标题显示不全的更改方法

    找到include/taglib/arclist.lib.php 1.$titlelen = AttDef($titlelen,30);换成$titlelen = AttDef($titlelen,2 ...

  3. 以守护进程的方式部署flask

    1.文件目录 创建一个简单的flask 项目... application = Flask(__name__) application.debug = True 2.安装wsgi pip instal ...

  4. maven项目生成war包

    配置 你的pom.xml文件,在你的overview视窗里 配置 packaging为 war 然后添加 <plugin> <groupId>org.apache.maven. ...

  5. requests关于Exceeded 30 redirects问题得出的结论

    昨天一个朋友在爬网页时出现的一个问题,以及后续我对这个问题进行了简单的测试. 先说出现的问题的简单描述. 首先是使用urllib请求网页: #urllib.request发起的请求 import ur ...

  6. 2017-07-07（zip unzip gzip gunzip）

    zip压缩格式 zip zip 压缩文件名   源文件    (压缩文件) zip -r    压缩文件名   源文件   (压缩目录) unzip unzip 压缩名 .gz压缩格式 gzip gz ...

  7. Spring-depends on

    depends-on用来表示一个bean A的实例化依靠另一个bean B的实例化, 但是A并不需要持有一个B的对象,如果需要的话就不用depends-on. 示例: 步骤一: public clas ...

  8. python3 第十章 - 如何进行进制转化

    在计算机的世界里,2进制是主流,而在人类的自然世界中,10进制是主流,那么在这之间必然就会存在进制转化的问题.本章我们就来谈谈进制转化,也希望通过本章加深您对前些章所学知识的理解. 原理:先说说关于位 ...

  9. navicat的简单使用

    navicat的简单使用: 连接: 输入ip地址,端口,用户名,密码 新建数据库: 数据库名,字符编码一定要选择utf-8 新建表: 字段,约束条件 双击表名,自己打开表,点击空列,添加数据,ctl+ ...

  10. python_如何对实例属性进行类型检查？

    案例: 在某项目中,我们实现了一些类,并希望能像静态语言那样对他们的实例属性进行类型检查 p = Person() p.name = 'xi_xi'         # 必须是str p.age = ...