元素偏移量系列笔记

元素偏移量系列笔记

e.preventDefault() 阻止默认事件
e.stopPropagation() 阻止冒泡

鼠标事件对象：
e.clientX 返回相对于浏览器窗口可视区的x坐标
e.clientY 返回相对于浏览器窗口可视区的y坐标

e.pageX 返回鼠标相对于文档页面的x坐标 ie9+支持
e.pageY 返回鼠标相对于文档页面的y坐标 ie9+支持

e.screenX 返回鼠标相对于电脑屏幕的X坐标
e.screenY 返回鼠标相对于电脑屏幕的Y坐标

一、DOM属性 元素偏移量offset系列：
ele.offsetParent 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body。
ele.offsetTop 返回元素相对带有定位父元素上方的偏移
ele.offsetLeft 返回元素相对带有定位父元素左边框的偏移
ele.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
ele.offsetHeight 返回自身包括padding、边框、内容区的高度，返回数值不带单位

二、DOM属性 元素可视区client系列：
ele.clientTop 返回元素上边框的大小
ele.clientLeft 返回元素左边框的大小
ele.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
ele.clientHeight 返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

三、DOM属性 元素滚动scroll系列：
ele.scrollTop 返回元素被卷去的上侧距离，返回数值不带单位
ele.scrollLeft 返回元素被卷去的左侧距离，返回数值不带单位
ele.scrollWidth 返回元素自身实际的宽度，不含边框，返回数值不带单位
ele.scrollHeight 返回元素自身实际的高度，不含边框，返回数值不带单位

！注意：
页面被卷去的头部为window.pageYOffset,被卷去的左侧为window.pageXOffset。
元素被卷去的头部为ele.scrollTop,被卷去的左侧为ele.scrollLeft。

三大系列总结：
1.大小对比：
ele.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
ele.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
ele.scrollWidth 返回元素自身实际的宽度，不含边框，返回数值不带单位
2.主要用法：
offset系列经常用于获得元素位置 offsetLeft offsetTop
client系列经常用于获取元素大小 clientWidth clientHeight
scroll系列经常用于获取滚动距离 scrollTop scrollLeft