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. 对python-rrdtool模块的浅研究。

    一,python-rrdtool模块安装. 切记!!! 这个rrdtool模块,在windows环境下安装太费劲,就是因为没安装上所以现在改成了在ubuntu环境下开发,原来没有体会过,现在可真是体会 ...

  2. .24-浅析webpack源码之事件流compilation(2)

    下一个compilation来源于以下代码: compiler.apply(new EntryOptionPlugin()); compiler.applyPluginsBailResult(&quo ...

  3. vmstat & mpstat & w

    vmstat # vmstat 3 2procs -----------memory---------- ---swap-- -----io---- --system-- -----cpu----- ...

  4. Micropython TPYBoard 智能温控小风扇资料分享

    南方都下大雪了,苦逼的北方还没下雪,天寒地冻,不过这几天办公室空调开太大了就想到做一个温控小风扇,简单模型出来了.等夏天一定做一个美观精致的小风扇送给女朋友(如果有的话QAQ)话不多说直接上干货.(跪 ...

  5. myeclipse中git的使用

    1.右键项目,team-->commit,勾选修改了的文件,点击commit(将更新提交到本地仓库)2.右键项目,team-->pull,合并本地仓库和远程服务器仓库,pull后有一些文件 ...

  6. 使用vue框架运行npm run dev 时报错解决

    使用使用vue框架运行npm run dev 时报错 如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现 我们可以动态修改地址 解决: 进入项目文件的config文 ...

  7. 02 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之Service层

    作者:nnngu 项目源代码:https://github.com/nnngu/nguSeckill 首先在编写Service层代码前,我们应该首先要知道这一层到底是干什么的. Service层主要负 ...

  8. intent详解（一）

    摘录自:http://blog.csdn.net/harvic880925/article/details/38399723 前言:通过重新翻看Android入门书籍,才发现原来自己露掉了那么多基础知 ...

  9. linkin大话面向对象--封装和隐藏

    软件开发追求的境界:高内聚,低耦合 高内聚:尽可能把模块的内部数据,功能实现细节隐藏在模块内部独立完成,不允许外部直接干预 低耦合:仅暴露少量的方法给外部使用 到底为什么要对一个雷或者对象实现良好的封 ...

  10. android EditText与TextView几个常用的属性

    android:maxLength="100"输入框最多输入的字数. android:maxEms="10"每行最多输入字符个数 android:textcol ...