先总结下区别:

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. int和Integer区别

    Java是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入了基本数据类型,但是为了能够将这些基本数据类型当成对象操作,Java为每一个基本数据类型都引入了对应的包装类型(wrapper cl ...

  2. 各种java面经资源

    面试的角度诠释Java工程师(一) 面试的角度诠释Java工程师(二) Java面试参考指南(一) Java面试参考指南(二) 阿里面试回来,想和Java程序员谈一谈 面试心得与总结—BAT.网易.蘑 ...

  3. LitJson JavaScriptSerializer

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  4. Spring 集成Hibernate的三种方式

    首先把hibernate的配置文件hibernate.cfg.xml放入spring的src目录下,并且为了便于测试导入了一个实体类Student.java以及它的Student.hbm.xml文件 ...

  5. python处理分隔大文件

    4个.sql格式的文件,2G大小,直接插入mysql数据中,文件太大了,导入不进去. 太大的文件用python处理也很麻烦,处理不了,只能先分隔成小文件处理. 文件中数据格式:其中values里面的数 ...

  6. Jakarta项目

    Jakarta项目是ASF(The Apache Software Foundation)的一部分.ASF是一个非赢利组织,她鼓励基于开放的软件许可下进行合作.注重实效的开发,并提供各个领域的高质量软 ...

  7. Jmeter分布式

    Jmeter运行时十分耗CPU和内存,在实际应用中有时一台机器不能满足测试要求,这时就需要利用多台机器来进行分布式.   Jmeter分布式的测试框架:框架中所有的测试脚本都要从测试主机传送到测试从机 ...

  8. byte,short,int,long数据之间的倍数关系

    基本数据类型 byte   =  -128和127------------------------------------------------------------2的8次方,1个字节 shor ...

  9. Python format 格式化函数。

    Python format 格式化函数  Python 字符串 Python2.6 开始,新增了一种格式化字符串的函数 str.format(),它增强了字符串格式化的功能. 基本语法是通过 {} 和 ...

  10. TZOJ 4746 Xiangqi(模拟棋盘数组)

    描述 Xiangqi is one of the most popular two-player board games in China. The game represents a battle ...