先总结下区别:

event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX、event.pageY

类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。

event.offsetX、event.offsetY

鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth    (包括边线的宽);
网页可见区域高: document.body.offsetHeight   (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。  
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度

  • offsetHeight
    获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度(内容高度+padding+margin+...)(图标为58px)
  • height
    只获取内容高度(图示为18px)

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标  
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;(用于IE浏览器)
而不是:
document.body.scrollTop;(补充:用于chrome等浏览器)
documentElement 对应的是 html 标签,而 body 对应的是 body 标签

event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等的更多相关文章

  1. 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

    总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...

  2. event对象的clientX,offsetX,screenX,pageX

    chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clie ...

  3. [1]区分event对象中的[clientX,offsetX,screenX,pageX]

    前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientXeven ...

  4. clientX,offsetX,screenX,pageX 区别!

    先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 eve ...

  5. clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解

    clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考. Chrome下(测试版本为51.0.2704.106  ...

  6. offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

    一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...

  7. pageX,clientX,offsetX,screenX,offsetLeft,style.left,offsetWidth,scrollWidth的区别以及使用详解

    https://www.cnblogs.com/echolun/p/9231760.html

  8. clientX .offsetX .screenX x 的区别

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

  9. 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

    通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...

随机推荐

  1. Producer-consumer problem in Python

    from: http://agiliq.com/blog/2013/10/producer-consumer-problem-in-python/ By : Akshar Raaj We will s ...

  2. log4j2搭建记录

    今天新建了一个项目,自己弄的小玩意,想要做的正式点,就想引入日志.就想到了log4j2,经过几个小时的努力,还真的可以用了,下面就记录一下我是怎么做的. 下面是总的结构: 下面是MAVEN依赖: &l ...

  3. Linux系统之更改默认块大小

    查看操作系统块大小:#tune2fs  -l /dev/sda1 |grep 'Block size'               ( tune2fs  -l  /dev/sda1可以查看更多相关文件 ...

  4. TCP/IP知识总结(TCP/IP协议族读书笔记三)

    接下来,总结传输层的两大协议UDP和TCP. 一.UDP(用户数据报协议) 讲UDP之间,先了解两个概念:有连接和无连接. 有连接:通信之前,通信双方必须建立一条通道: 无连接:不需要建立通道,发送方 ...

  5. jremoting的功能扩展点

    1  InvokeFilter,实现此接口 可以在consumer端 与provider端的调用过程中拦截住请求调用. 已经实现的InvokeFilter包括 RetryInvokeFilter:实现 ...

  6. spark 创建稀疏向量和矩阵

    http://blog.csdn.net/canglingye/article/details/41316193 [相互转换]:http://stackoverflow.com/questions/3 ...

  7. jenkins 自动构建gitlab项目

    安装的plugin: - kubernetes:1.7.1    - workflow-aggregator:2.5    - workflow-job:2.21    - credentials-b ...

  8. dubbo+springMVC+Spring+Mybatis

    1.新建Maven Project 1.1   1.2   2新建Maven Module ——提供者和消费者都需要引用的共同代码块(如entity和service接口) 2.1 2.2 2.3 2. ...

  9. Promise/Deferred

    [fydisk] 1.$.get('/api').success(onSuccess).error(onError).comlete(onComplete); 2.对同一事件加入多个Handler. ...

  10. XX-net 部署网络

    https://github.com/XX-net/XX-Net/wiki/%E4%BD%BF%E7%94%A8Chrome%E6%B5%8F%E8%A7%88%E5%99%A8 主要步骤有三步:安装 ...