本篇主要介绍clientLeft、offsetLeft、clientX、offsetX这四种元素属性的区别，首先我们要理解清楚它们的概念：
clientLeft：该元素对象的左边框宽度。
clientWidth：该元素对象的左内边框至右内边框的距离。
offsetLeft：该元素左外边框至窗口左边界的距离。
offsetWidth：该元素左外边框至右外边框的距离。
我们可以参考下图所示：
上图测试源码为：
在实现移动或拖动功能时，我们可以通过下列代码动态改变他们的位置：
这里最重要的一点区别是，上面的4个对象属性都相对于标签元素；而clientX、offsetX则是相对于鼠标事件对象，即需要触发鼠标事件才会有clientX、offsetX。
clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标。
offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。
我们可以参考下图所示，A点被点击，当触发鼠标点击事件时：
上图测试源码为：
我们回到前面的offsetLeft这个属性，该属性有些歧义，有些网友是这样解释的：当前对象的外边框到它上层对象的内边框之间的距离。我们做个测试，看下图：
为了验证正确性，我还换了不同的浏览器，通过测试可得出：offsetLeft是该元素左外边框至窗口左边界的距离。
（注）本篇介绍了clientLeft、offsetLeft、clientX、offsetX，根据本文介绍的特点，同理就可不难理解clientTop、offsetTop、clientY、offsetY的概念
（注）还有两个值很重要的值：一个是scrollTop，另一个是scrollLeft
正确获取当前鼠标点击坐标算法：
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/4797.html