clientX与offsetX、clientWidth与offsetWidth的区别

相关属性介绍

都要结合鼠标事件监听使用

1、client相关属性

获取鼠标位置

鼠标相对于视口的位置
e.clientX e.clientY （e是鼠标对象）

获取节点尺寸

节点.clientWidth; 节点.clientHeight;（返回值为数值）

clientWidth = content宽度 + 左padding + 右padding（即：实际尺寸 不含border和margin，不论是什么盒模型）

clientHeight = content高度 + 左padding + 右padding （即：实际尺寸 不含border和margin，不论是什么盒模型）

获取边框宽度

clientTop = 上边框的宽度

clientLeft = 左边框的宽度

2、offset相关属性

获取鼠标位置

鼠标相对于事件源的位置
e.offsetX e.offsetY （如果鼠标事件为mousemove，则移到子节点时变成相对于子节点的位置）

获取节点尺寸

节点.offsetWidth; 节点.offsetHeight;（返回值为数值）

offsetWidth = content宽度 + 左padding + 右padding + 左boder + 右boder

offsetHeight = content高度 + 左padding + 右padding + 左boder + 右boder

offsetTop：当前节点的 上边框外边缘 到最近的已定位父级（offsetParent） 上边框内边缘 的距离。

offsetLeft：当前元素 左边框外边缘 到最近的已定位父级（offsetParent） 左边框内边缘 的距离。
offsetParent：获取离当前元素最近的已定位父级（即：position有以下属性值之一：relative absolute fixed），如果父级都没有定位，则获取的为body节点

区别

clientX/clientY 的位置是鼠标相对于整个视口的左上角的位置
offsetX/offsetY 的位置是鼠标相对于事件源（即鼠标所停留在的那个节点）的左上角的位置

clientWidth/clientHeight 的尺寸是节点不包含border宽度和margin的尺寸，不论是什么盒模型都不包含
offsetWidth/offsetHeight 的尺寸是节点不包含margin的尺寸

区别图如下