一: 鼠标尺寸类样式
都要事件对象的配合
Tip: 注意与浏览器及元素尺寸分开, 鼠标类尺寸样式都是 X,Y, 浏览器及元素的各项尺寸时 Height,Width
1: 检测相对于浏览器的位置: event.clientX/event.clientY
client: 整个浏览器的可视区域, 当点击鼠标的时候, 鼠标事件发生的位置距离浏览器可视区域的左边和上边的距离
clientX: 鼠标事件发生的位置距离浏览器可视区域的左边的距离
clientY: 鼠标事件发生的位置距离浏览器可视区域的上边的距离
2: 检测相对于屏幕的位置 event.screenX/event.screenY
screen: 整个屏幕的大小, 当鼠标点击的时候, 鼠标事件发生的位置相对于屏幕的左边和上边的距离
event.screenX: 鼠标事件发生的位置距离屏幕左边的距离
event.screenY: 鼠标事件发生的位置距离屏幕上边的距离
3: 检测相对于事件源的位置: event.offsetX/event.offsetY
Tip: 注意这个事件源的模型, offset 的检测是不包括边框的大小的, 但是包括内边距, 如果边框的大小为 10px, 那么最左边的 X 的距离为 - 10;
offset: 相对于事件源, 当鼠标事件发生时, 相对于发生事件的事件源的左边的距离和上边的距离
event.offsetX: 当鼠标事件发生时, 相对于发生事件的事件源的左边的距离
event.offsetY: 当鼠标事件发生时, 相对于发生事件的事件源的上边的距离
4: 检测相对于文档的位置: event.pageX/event.pageY
Tip: 这个文档指的这个页面, 页面在不发生滚动的情况下, 浏览器的可视区域等于文档的可视区域, 这个时候 event.clientX = event.offetX
一旦页面发生了滚动, 那么滚动消失的距离, page 是可以检测来的, 这时候 event.cientX 与 event.pageX 的距离是不相等的
page: 页面文档, 当页面发生了滚动的, 早上文档顶部隐藏了一部分, pageX 的距离还是从文档最顶的距离开始检测的
pageX: 当鼠标事件发生时, 鼠标相对于文档左边的位置 (IE7,8 没有)
pageY: 当鼠标事件发生时, 鼠标相对于文档上边的位置 (IE7,8 没有)
二: 浏览器及元素各项尺寸
offsetParent: 获取元素的最近的具有定位属性的父元素
image
1: 元素. offsetWidth / 元素. offsetHeight: 元素的实际宽高
Tip: 元素的实际宽高是包括边框的, 指的是这个元素的全部
offset: 针对元素的
offsetWidth: 元素的宽度
offsetHight: 元素的高度
2: 元素. offsetLeft / 元素. offsetTop, 针对具有定位属性的父元素的左边和上边的距离
Tip: 从边框的边缘开始检测的
offset: 针对元素的
offsetLeft: 元素对于具有定位属性的父元素的左边距
offsetTop: 元素对于具有定位属性的父元素的上边距
3: 元素. clientWidth / 元素. clientHeight
client: 不包括元素的边框
clientWidth: 元素的可视宽度
clientHeight: 元素的可视高度
4: 元素. clientLeft / 元素. clientTop
cilentLeft: 当前元素的左边框的大小
clientTop: 当前元素的上边框的大小
5: 元素. scrollHeight / 元素. scrollwidth
cilentLeft: 当前元素的左边框的大小
clientTop: 当前元素的上边框的大小
6: 元素 scrollTop / 元素. scrollLeft
scrollTop: 滚动条最顶端和可见内容的最顶端的距离
scrollLeft: 滚动条最左端和可见内容的最左边的距离
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/50e63d99b7d6