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. js根据出生年月日换算年龄

    function age_Conversion(date) { debugger var age = ''; var str = date.replace(/年|月/g, "-") ...

  2. IOS safari浏览器登陆时Cookie无法保存的问题

    近期完成了一个儿童的测评项目,测试到最后的时候发现在ipad mini上登陆成功之后无法跳转页面,而安卓和pc端都可以,找了大半天bug,发现其他的苹果设备都没问题,只能一个一个的调试,结果发现设备的 ...

  3. Java中Calendar.DAY_OF_WEEK、DAY_OF_MONTH需要减一的原因

    Java中对日期的处理需要用到Calendar类,其中有几个方法在使用时需要新手注意.1. 在获取月份时,Calendar.MONTH + 1 的原因(Java中Calendar.MONTH返回的数值 ...

  4. 数据结构与算法(c++)——双缓存队列

    "双缓存队列"是我在一次开发任务中针对特殊场景设计出来的结构.使用场景为:发送端持续向接收端发送数据包--并且不理会接收端是否完成业务逻辑.由于接收端在任何情况下停止响应即可能产生 ...

  5. 阿里巴巴Java开发手册评

    2016年底的时候阿里巴巴公开了其在内部使用的Java编程规范.随后进行了几次版本修订,目前的版本为v1.0.2版.下载地址可以在其官方社区-云栖社区https://yq.aliyun.com/art ...

  6. Dos下的小技巧

    1.dos 窗口下怎样复制粘贴 第一种方式:右键标记-->选中-->标题栏右键编辑-->复制 第二种方式:右键-->标记-->选中-->enter 这样就可以复制了 ...

  7. Oracle问题之字符集问题,登陆sqlplus出现问号

    退出sql SET NLS_LANG=AMERICAN_AMERICA.ZHS16GBK show parameter nls_la

  8. python 与redis

    一.redis安装 源码安装:   1.wget http://download.redis.io/redis-stable.tar.gz   2.yum install gcc   3.tar zx ...

  9. uwsgi wsgi nginx centos7.2部署flask

    请原谅我比较懒,直接粘贴onenote笔记了 方法一测试完成后,建议用方法三:uwsgi,ginx部署

  10. [原创]自动获取当前URL所属主域的JS方法（适合多级域名）

    工作中要用到,就随手写了个,不是什么难题,分享给有需要的朋友(主要是很久没更新博客了). 如果有特殊域名,比如“.tj.cn",请将".tj"加到hostExts数组中( ...