javascript中常用坐标属性

javascript中常用坐标属性

MouseEvent(鼠标事件)属性

都是MouseEvent对象下的属性，必须用该对象调用（只读）

MouseEvent：当鼠标事件触发后都会产生此对象，该对象记录着鼠标触发事件时的所有属性

例图：

其常用的坐标属性有：

1. clientX（clientY）
     返回当事件被触发时鼠标指针相对于浏览器页面可视区域的水平坐标（left）、垂直坐标（top）
   注意： 此属性不论页面是否有滚动条，光标所在浏览器可视区域的位置都是固定的（简单理解为你在浏览器中看到的内容，就是可视区域）。
2. pageX（pageY）
     返回当事件被触发时鼠标指针相对于整个页面（body）左上角的水平坐标、垂直坐标
   注意： 这个属性会存着滚动条的滚动而发生改变。

建议：
 当浏览器窗口有有滚动条时使用pageX（pageY）
 没有滚动条可以使用clientX（clientY）

3. screenX（screenY）
     返回当事件被触发时鼠标位置相对于用户屏幕水平坐标（left）、垂直坐标（top），此时的参照点也就是原点屏幕的左上角
4. offsetX（offsetY）
     返回触发事件时 鼠标相对于事件源元素 的水平坐标（left）、垂直坐标（top）

DOM元素的offset属性

HTMLElement对象下的属性，使用DOM元素进行调用（ 只读）

HTMLElement：是一个接口表示所有的 HTML 元素。一些HTML元素直接实现了HTMLElement接口，其它的间接实现HTMLElement接口.

1. offsetTop（offsetLeft）
     返回当前元素相对于已经有定位的父元素来获取当前元素到父元素的上侧距离（top偏移量）以及左侧距离（left偏移量）
2. offsetWidth（offsetHeight）
     返回当前元素自身的宽（高），该宽（高）包含内边距（padding）、边框（border）和滚动条（scroll bar）
3. offsetParent
     返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素

元素的client属性

Element对象下的属性，使用DOM元素进行调用（只读）

Element：该对象是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它，表示 XML 文档中的元素。

1. clientHeight（clientWidth）
     返回该元素自身的宽（高）包含内边距，（不包含边框、滚动条）
2. clientLeft（clientTop）
     返回该元素的左边框和上边框的宽度
3. scrollTop（scrollLeft）
     返回该元素的滚动条滚动时被卷进去的内容的上侧及左侧距离，返回值不带单位（就是滚动条滚动距离）
4. scrollWidth（scrollHeight）
     返回自身的实际宽（高）（不含边框）文档内容实际高度，包括超出视窗的溢出部分
   附：草图
   

window下的相关坐标属性

window对象下的属性，可以省略window直接使用（只读）

1. pageXOffset（pageYOffset）
     返回页面在滚动时左侧以及上侧被卷进去的页面距离
   附：草图
   

2. screenLeft（screenTop）
     返回浏览器距离电脑屏幕左上角的左侧以及上侧距离

3. innerWidth（innerHeight）
     返回以像素为单位的窗口内部宽（高）。如果滚动条存在，则这个属性将包括它的宽（高）

4. screen.width（screen.height）
     返回该电脑显示屏的宽（高）

如有错误还请指出，希望这篇文章能给予你们帮助！