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的区别及总结