元素计算距离与event事件对象

元素计算距离与event事件对象

元素

1. offsetLeft/offsetTop

当前元素相对于父元素左边/上边的偏移量。只读属性，父元素不能是static。当前元素如果是fixed定位，返回的是元素与可是窗口的距离。

2. style.left/style.top

当前元素相对于父元素左边/上边的偏移量。

注意
offsetLeft/offsetTop与style.left/style.top的区别：

1. offset是只读属性，style.left是可读可写属性；
2. offset返回值是Number类型，小数会四舍五入，style.left返回值是string类型（例如：100px）；
3. style.left必须在html标签中定义，如果在style或者css文件里定义无效，返回空字符串

3. offsetHeight/offsetWidth

当前元素的高度/宽度。offset值 = content + padding + border，不包括margin

4. style.height/style.width

当前元素的高度/宽度。style值 = content + padding，不包括border和，margin

注意
offsetHeight/offsetWidth与style.height/style.width的区别：

1. offset是只读属性，style是可读可写属性；
2. offset返回值是Number类型，小数会四舍五入，style.left返回值是string类型（例如：100px）；
3. offset有border，style不包括border；
4. style必须在html标签中定义，如果在style或者css文件里定义无效，返回空字符串
5. 元素如果没有高度/宽度，offset会根据内容自动获取高度/宽度，style返回空字符串

5. clientWidth/clientHeight

当前元素的宽度/高度。client值 = content + padding，不包括border、margin和滚动条

6. scrollWidth/scrollHeight

滚动宽度/高度。scroll = content + padding，不包括边框。只读属性，没有滚动条时相当于clientWidth/clientHeight

7. scrollTop/scrollLeft

滚动条滚动距上边/左边距离。可读可写属性。

8. innerWidth/innerHeight

• window.innerWidth/window.innerHeight：
  ①窗口文档显示区域的宽度/高度，inner值 = content + padding，不包括菜单栏、滚动条等；
  ②只读属性；
  ③IE9以下不支持，处理兼容：

var w=window.innerWidth || document.documentElement.clientWidt || document.body.clientWidth;

9. outerWidth/outerHeight

• window.outerWidth/window.outerHeight：
  ①窗口的宽度/高度，outer值 = content + padding + border，如果outerWidth(true)时，outer值 = content + padding + border + margin；
  ②只读属性，包括菜单栏、滚动条

event事件对象

1. e.offsetX/e.offsetY

鼠标点击位置相对于触发事件对象的水平距离/垂直距离

2. e.clientX/e.clientY

鼠标点击位置相对于浏览器可视区域的水平距离/垂直距离，不包括滚动条

3. e.pageX/e.pageY

鼠标点击位置相对于浏览器可视区域的水平距离/垂直距离，包括滚动条

4. e.screenX/e.screenY

鼠标点击位置相对于电脑屏幕左边/上边的距离

5. e.movementX/e.movementY

物体移动时，当前移动位置与上一个移动位置的水平/垂直距离

6. layerX/layerY

一般用于Firefox浏览器，作用于offsetX/offsetY相同

参考文章：https://juejin.cn/post/6883353218319908871