捋清楚并整理关于事件参数 MouseEvent、全局对象 Window、元素 Element 中的位置和尺寸属性

捋清楚并整理关于事件参数 MouseEvent、全局对象 Window、元素 Element 中的位置和尺寸属性。

事件参数 MouseEvent

• event.clientX 鼠标点击位置距离当前 body 可视区域的 X 坐标。
• event.clientY 鼠标点击位置距离当前 body 可视区域的 Y 坐标。
• event.screenX 鼠标点击位置距离当前 设备屏幕的 X 坐标。
• event.screenY 鼠标点击位置距离当前 设备屏幕的 Y 坐标。
• event.offsetX 鼠标点击位置距离当前 相对于带有定位的父盒子的 X 坐标。
• event.offsetY 鼠标点击位置距离当前 相对于带有定位的父盒子的 Y 坐标。
• event.pageX 鼠标点击位置距离当前 页面(包含横向滚动条距离)的 X 坐标；
• event.pageX 等同于 event.clientX + document.documentElement.scrollLeft
• event.pageY 鼠标点击位置距离当前 页面(包含纵向滚动条距离)的 Y 坐标；
• event.pageY 等同于 event.clientY + document.documentElement.scrollTop
• event.x MouseEvent.clientX 的别名。
• event.y MouseEvent.clientY 的别名。
  event.layerX、event.layerY 这个属性需要搭配使用 position 定位的几个值才能看出不一样的地方。大致概念为：如果元素自身的 position 属性不是 static，那么这个元素的 layer 就相对于它自身的左上角开始计算。

事件参数 MouseEvent （位置图）

元素 Element

• el.clientWidth: 获取元素的 width + padding (不包括边框（border）、外边距（margin）和垂直滚动条)

• el.clientHeight：获取元素的 height + padding (不包括边框（border）、外边距（margin）和水平滚动条)

• el.offsetWidth：获取元素的 width + padding + border

• el.offsetHeight： 获取元素的 height + padding + border

• el.offsetParent：当前元素的父级元素中有 CSS 定位（position 为 absolute/relative）offsetParent 取父级中最近的元素，否则 offsetParent 为 body。

• el.offsetTop： 获取当前元素相对于父元素 的 top 方向的距离

• el.offsetLeft： 获取当前元素相对于父元素 的 left 方向的距离
  

• el.scrollWidth： 元素内容真实的宽度，内容不超出盒子高度时为盒子的 clientWidth

• el.scrollHeight： 元素内容真实的高度，内容不超出盒子高度时为盒子的 clientHeight

• el.scrollLeft： 读取或设置元素滚动条到元素左边的距离

• el.scrollTop： 读取或设置位于对象最顶端和窗口中可见内容的最顶端之间的距离
  

• el.scrollIntoView()： 方法 让元素滚动到可视区 参数参考

• el.scrollTo()：方法 方法可以使界面滚动到给定元素的指定坐标位置 参数参考

  • el.scrollTo 代码示例

  /**设置滚动条到最上方 */
  export const setMainScrollTop = (id: string, num: number = 0) => {
    let oMianDom = document.getElementById("id");
    if (oMianDom && typeof num === "number") {
      oMianDom.scrollTo({
        top: num,
        behavior: "smooth",
      });
    }
  };
  

全局对象 Window

• window.innerHeight： 只读 返回以像素为单位的窗口的高度，包含纵向滚动条。

• window.innerWidth： 只读 返回以像素为单位的窗口的内部宽度，包含水平滚动条。

• window.outerWidth： 只读 整个浏览器窗口的宽度。

• window.outerHeight： 只读 整个浏览器窗口的高度。
  

• window.screenLeft：只读 返回浏览器左边框到设备屏幕边缘的 CSS 像素数。

• window.screenTop：只读 返回浏览器的上边界到设备屏幕最顶端的 CSS 像素数。
  

• window.screenX：返回浏览器左边界到操作系统桌面左边界的水平距离。

• window.screenY：返回浏览器顶部距离系统桌面顶部的垂直距离。

• window.scrollX： 返回文档/页面水平方向滚动的像素值。

• window.scrollY： 返回文档在垂直方向已滚动的像素值。

• pageXOffset(pageYOffset) 获取页面的水平和垂直滚动距离，属性相等于 scrollX 和 scrollY 属性，适用于 FF，chrome，IE9+，opera 等多浏览器支持(其实是针对 ie8 和 ie9 之下的 ie)
  

• window.screen.availHeight 返回浏览器窗口在屏幕上可占用的垂直空间，即最大高度。

• window.screen.height 返回屏幕的高度（单位：像素）。

• window.screen.availTop 返回浏览器窗口可占用的水平宽度（单位：像素）。

Document 文档视图相关属性

document.documentElement 获取的是根元素 html

• document.documentElement.clientWidth： 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏、滚动条）
• document.documentElement.clientHeight： 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏、滚动条）
• （低版本IE的innerWidth、innerHeight的代替方案）
• document.documentElement.offsetHeight： 获取整个文档的高度（包含 body 的 margin）
• document.body.offsetHeight： 获取整个文档的高度（不包含 body 的 margin）
• document.documentElement.scrollTop： 返回文档的滚动 top 方向的距离（当窗口发生滚动时值改变）
• document.documentElement.scrollLeft： 返回文档的滚动 left 方向的距离（当窗口发生滚动时值改变）

获取元素位置 getBoundingClientRect;

参考文档 mdn

• getBoundingClientRect： 方法返回一个 DOMRect 对象，提供了元素的大小及其相对于视口的位置。
• 返回值是一个 DOMRect 对象，是包含整个元素的最小矩形（包括 padding 和 border-width）。除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

使用方法：

/**
 *  left: 元素最左边（不包括border）到可视区最左边的距离
 *  right: 元素最右边（包括border）到可视区最左边的距离
 *  top: 元素顶边（不包括border）到可视区最顶部的距离
 *  bottom: 元素底边（包括border）到可视区最顶部的距离
 *  height: 元素的offsetHeight
 *  width: 元素的offsetWidth
 *  x: 元素左上角的x坐标
 *  y: 元素左上角的y坐标
 */
let elem = document.getElementById("#id");
let rectInfo = elem.getBoundingClientRect();

位置图

坐标系工具

获取滚轮滚动的距离

function getScrollY() {
  return window.pageYOffset || document.documentElement.scrollTop;
}

设置垂直方向滚轮滚动的距离,适配所有的浏览器

function setScrollY(num) {
  document.body.scrollTop = document.documentElement.scrollTop = num;
}

元素距离文档左侧距离

元素距离文档左侧距离实现思路和上面的元素距离文档顶部距离的类似。当 offsetParent 为 body 时，可以通过 el.offsetLeft 确定元素距离文档顶部大小。当 offsetParent 不为 body 时，就需要一层层循环至 offsetParent 为 null。

function getLeft(el) {
  let left = el.offsetLeft;
  let currentParent = el.offsetParent;
  while (currentParent != null) {
    left += currentParent.offsetLeft;
    currentParent = currentParent.offsetParent;
  }
  return left;
}

元素距离文档顶部距离

当 offsetParent 为 body 时，可以通过 el.offsetTop 确定元素距离文档顶部大小。当 offsetParent 不为 body 时，就需要一层层循环至 offsetParent 为 null。

function getTop(el) {
  let top = el.offsetTop;
  let currentParent = el.offsetParent;
  while (currentParent != null) {
    top += currentParent.offsetTop;
    currentParent = currentParent.offsetParent;
  }
  return top;
}

参考文档

• Window
• MouseEvent
• Document_Object_Model

有疑问的同学可以私信我、对帮助到同学欢迎大家收藏评论。