元素偏移量系列笔记
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