js中的鼠标位置及元素宽度位置总结

不废话，直接上总结图！

鼠标位置总结

鼠标位置总结

各y同各x。

鼠标位置图例

元素宽度总结

元素宽度总结

height 同width。

各left总结

各top总结

注意：offsetLeft 和offsetTop依赖offsetParent元素

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,``td,``th,``body元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

元素宽度距离图例

元素距离总结

元素距离可以使用getBoundingClientRect，返回元素的大小及其相对于视口(浏览器)的位置。

• 标准盒子模型width===offsetWidth，height===offsetHeight，box模型width===width,height===height
• left,top理解似css里面的left,top
• right=left+width
• bottom=top+height
  
  getBoundingClientRect

测试代码：

<div
            style="
                width: 100px;
                height: 100px;
                margin-top: 50px;
                margin-left: 50px;
                padding: 10px;
                border: 5px solid #ccc;
                background: #4abf14;
                overflow: auto;
            "
            @click="test"
        >
            测试元素各种宽度 测试元素各种宽度 测试元素各种宽度 测试元素各种宽度
            测试元素各种宽度
        </div>
//js
      test(e) {
            const target = e.target;
            console.log("target", target);
            console.log("clientX", e.clientX);
            console.log("offsetX", e.offsetX);
            console.log("x", e.x);
            console.log("pageX", e.pageX);
            console.log("screenX", e.screenX);
            console.log("clientWidth", target.clientWidth);
            console.log("clientLeft", target.clientLeft);
            console.log("clientTop", target.clientTop);
            console.log("offsetWidth", target.offsetWidth);
            console.log("offsetLeft", target.offsetLeft);
            console.log("offsetTop", target.offsetTop);
            console.log("scrollWidth", target.scrollWidth);
            console.log("scrollLeft", target.scrollLeft);
            console.log("scrollTop", target.scrollTop);
            console.log("getBoundingClientRect",target.getBoundingClientRect());
            console.log("screen.width", screen.width);
            console.log("availWidth", screen.availWidth);
            console.log("availHeight", screen.availHeight);
            console.log("window.innerWidth", window.innerWidth);
            console.log("window.outerWidth", window.outerWidth);
        },

参考文章

scrollWidth、clientWidth、offsetWidth的区别及总结