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. c# tolist() 浅析

    在介绍tolist()的时候我先个大家介绍一下linq的延迟加载: var products = new List<Product> { , Category = "Electr ...

  2. vue安装babel依赖报错

    刚刚因为一些原因把依赖包删除,重新install了一下,结果报错 deprecate babel-preset-es2015@* ???? Thanks for using Babel: we rec ...

  3. UE4 字符串的转换

    创建Fstring: FString TestHUDString = FString(TEXT("This is my test FString.")); FString,FNam ...

  4. MLlib--SVD算法

    转载请标明出处http://www.cnblogs.com/haozhengfei/p/4db529fa9f4c042673c6dc8218251f6c.html SVD算法 1.1什么是SVD?   ...

  5. TPshop学习(8)微信支付

    http://blog.csdn.net/phper8/article/details/76383415 学习内容: https://www.kancloud.cn/tpshop/thinkphp5/ ...

  6. Yourphp是一款完全开源免费的.核心采用了Thinkphp框架

    Yourphp企业网站管理系统,是一款完全开源免费的PHP+MYSQL系统.核心采用了Thinkphp框架,同时也作为开源软件发布.集众多开源项目于一身的特点,使本系统从安全,效率,易用及可扩展性上更 ...

  7. c语言统计一个文件中的单词，字符和行数

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  8. RocketMQ-消费重试机制

    介绍: RocketMQ的消息重试及时分为两种,一种是Producer端重试,一种是Consume端重试. 1.Producer端重试 : 1.1消息发没发成功,默认情况下是3次重试. 2.Consu ...

  9. C#动态设置匿名类型对象的属性

    用C#写WPF程序, 实现功能的过程中碰到一个需求: 动态设置对象的属性,属性名称是未知的,在运行时才能确定. 本来这种需求可以用 Dictionary<string, object> 实 ...

  10. requests_模拟登录知乎

    如何登录知乎? 首先要分析,进行知乎验证的时候,知乎服务器需要我们提交什么数据,提交的地址.先进行几次登录尝试,通过浏览器中network中查看数据流得知,模拟登录知乎需要提供5个数据,分别是_xsr ...