Dom的位置大小 offset、client、scroll家族 和 Event对象

一阵石头雨
46 阅读2分钟

一. Element（offset、client、scroll 家族）

  • window.pageXOffset / window.pageYOffset

    • 属性。返回页面当前已水平/垂直滚动的像素值。

  • window.screenX / window.screenY

    • 属性。返回浏览器窗口相对于屏幕左边缘的水平/垂直坐标。

  • element.getBoundingClientRect()

    • 方法。返回元素的大小及其相对于视口的位置，返回值是一个 DOMRect 对象。
const rect = draggable.getBoundingClientRect();
rect.width/height
rect.x/y

  • element.clientRects

    • 属性。返回与元素相关的所有矩形区域的 DOMRectList，用于处理多行文本元素。

  • element.scrollWidth / element.scrollHeight

    • 属性。元素的实际内容宽度/高度，包括不可见的溢出部分。

  • element.scrollTop / element.scrollLeft

    • 属性。元素的内容被卷起的垂直/水平距离。这些属性常用于实现自定义滚动行为或在加载内容时滚动到特定位置。

  • element.clientWidth / element.clientHeight

    • 属性。元素的内部宽度/高度，包括内容和内边距，但不包括边框和滚动条。

  • element.clientTop / element.clientLeft

    • 属性。元素的边框顶部和左侧的宽度，通常用于获取内容与元素顶部/左边框的偏移量。

  • element.offsetWidth / element.offsetHeight

    • 属性。元素的可见宽度/高度，包括内容、内边距和边框，不包括外边距。

  • element.offsetTop / element.offsetLeft

    • 属性。元素相对于其 offsetParent 的顶部/左侧的偏移量。


二. Event对象， JS事件回调

常用属性

  1. type：返回事件的类型（如 "click"、"keydown" 等）。
  2. target：返回触发事件的元素。
  3. currentTarget：返回绑定事件监听器的元素。
  4. bubbles：返回布尔值，指示事件是否是冒泡事件。
  5. cancelable：返回布尔值，指示事件是否可以被取消。
  6. defaultPrevented：返回布尔值，指示是否已调用 preventDefault()。
  7. timeStamp：事件触发的时间戳。
  8. isTrusted：返回布尔值，指示事件是否由浏览器创建（true）还是由用户脚本创建（false）。

常用方法

  1. preventDefault() ：取消事件的默认行为。
  2. stopPropagation() ：阻止事件冒泡到父元素。
  3. stopImmediatePropagation() ：不仅阻止事件冒泡，还阻止同一元素上的其他事件监听器被调用。

不同事件类型的额外属性

  • 鼠标事件 (如 click, mousemove)

    • clientX / clientY：事件触发时鼠标相对于浏览器窗口的坐标。
    • pageX / pageY：事件触发时鼠标相对于整个页面的坐标。
    • screenX / screenY：事件触发时鼠标相对于屏幕的坐标。
    • button：鼠标按下的按钮（0: 左键, 1: 中键, 2: 右键）。

  • 键盘事件 (如 keydown, keyup)

    • key：返回按下的键（如 "a"、"Enter"）。
    • repeat：返回布尔值，指示键是否被长按。

  • 触摸事件 (如 touchstart, touchmove)

    • touches：当前所有与屏幕接触的触点列表。
    • targetTouches：与当前事件目标相关的触点列表。
avatar
文章
阅读
粉丝