DOM坐标

November 30, 2022

以下 Typescript 定义为节选

鼠标事件 MouseEvent

https://developer.mozilla.org/docs/Web/API/MouseEvent

mousedown/mouseup
mouseover/mouseout
mousemove
click/dblclick/contextmenu

坐标系原点为左上角

// prettier-ignore
interface MouseEvent extends UIEvent {
    readonly altKey: boolean;
    readonly shiftKey: boolean;
    readonly ctrlKey: boolean;
    readonly metaKey: boolean;
    readonly button: number; // 左键0，中键1，右键2
    readonly buttons: number; // 所有按键的数值做或运算

    readonly clientX: number; // 相对于窗口的横坐标
    readonly clientY: number; // 相对于窗口的纵坐标
    readonly x: number; // 同 clientX
    readonly y: number; // 同 clientY

    readonly pageX: number; // 相对于文档的横坐标
    readonly pageY: number; // 相对于文档的纵坐标

    readonly screenX: number; // 相对于显示器的横坐标
    readonly screenY: number; // 相对于显示器的纵坐标

    readonly movementX: number; // 相对于最后mousemove事件位置的横坐标
    readonly movementY: number; // 相对于最后mousemove事件位置的纵坐标

    readonly relatedTarget: EventTarget | null;
    /* 继承的 readonly target: EventTarget */
    readonly offsetX: number; // 相对于target的padding-box的横坐标（若在边框上，则为负数）
    readonly offsetY: number; // 相对于target的padding-box的纵坐标（若在边框上，则为负数）
    /* ... */
}

往往需要阻止默认事件

element.ondragstart = () => false;

元素坐标 `Element.prototype.getBoundingClientRect(): DOMRect`

返回元素 border-box 相当于窗口左上角的距离（精确到小数位）。

element-box-diagram

interface DOMRect extends /* ... */ {
    readonly left: number; // 元素border-box左边相对窗口的距离
    readonly top: number;
    readonly bottom: number;
    readonly right: number;

    x: number; // 元素起始点横坐标
    y: number; // 元素起始点纵坐标
    width: number;  // 可为负数
    height: number; // 可为负数
    /* ... */
}

Element 及 HTMLElement 接口

https://developer.mozilla.org/docs/Web/API/Element
https://developer.mozilla.org/docs/Web/API/HTMLElement

这些属性的值会四舍五入

interface Element extends /* ... */ {
    // border + scrollBar
    readonly clientLeft: number; // 元素padding外部与border外部的水平距离（若无滚动条，即为边框宽度）
    readonly clientTop: number;  // 元素padding外部与border外部的垂直距离（若无滚动条，即为边框高度）

    // content + padding
    readonly clientWidth: number;  // 元素padding-box宽度（不包括滚动条宽度）
    readonly clientHeight: number; // 元素padding-box高度（不包括滚动条宽度）

    // scroll + content + padding
    readonly scrollWidth: number;  // 元素border-box宽度，包括滚动出的部分（不包括滚动条宽度）
    readonly scrollHeight: number; // 元素border-box高度，包括滚动出的部分（不包括滚动条宽度）

    // scroll
    scrollTop: number;  // 元素滚动出的垂直距离
    scrollLeft: number; // 元素滚动出的水平距离
    /* ... */
}

interface HTMLElement extends Element /* ... */ {
    // border + padding + content
    readonly offsetWidth: number;  // 元素border-box宽度
    readonly offsetHeight: number; // 元素border-box高度

    readonly offsetParent: Element | null; // 最接近的祖先元素（定位）
    readonly offsetLeft: number; // 元素相对offsetParent的border-box左上角的水平距离
    readonly offsetTop: number;  // 元素相对offsetParent的border-box左上角的垂直距离
    /* ... */
}

Window 接口

interface Window extends EventTarget /* ... */ {
    // 包括滚动条的宽高（不包括滚动部分）
    readonly innerHeight: number;
    readonly innerWidth: number;

    // 整个浏览器窗口的宽高
    readonly outerHeight: number;
    readonly outerWidth: number;

    // 文档当前滚动距离，相当于document.documentElement.scrollTop/scrollLeft
    readonly scrollX: number;
    readonly scrollY: number;
    // 下面的两个属性只是上面的别名
    readonly pageXOffset: number;
    readonly pageYOffset: number;

    // 浏览器与显示器边界的距离
    readonly screenX: number;
    readonly screenY: number;
    // 下面的两个属性只是上面的别名
    readonly screenLeft: number;
    readonly screenTop: number;

    readonly screen: {
        readonly availHeight: number;
        readonly availWidth: number;
        readonly width: number;
        readonly height: number;
        readonly colorDepth: number;
        readonly pixelDepth: number;
        readonly orientation: ScreenOrientation;
    };
    /* ... */
}

滚动方法

interface ScrollOptions {
    behavior?: "auto" | "smooth";
}

interface ScrollToOptions extends ScrollOptions {
    left?: number;
    top?: number;
}

interface ScrollIntoViewOptions extends ScrollOptions {
    block?: "center" | "end" | "nearest" | "start";
    inline?: "center" | "end" | "nearest" | "start";
}

interface Element /* ... */ {
    /* ... */
    scroll(options?: ScrollToOptions): void;
    scroll(x: number, y: number): void;
    scrollBy(options?: ScrollToOptions): void;
    scrollBy(x: number, y: number): void;
    scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
    scrollTo(options?: ScrollToOptions): void;
    scrollTo(x: number, y: number): void;
}

interface Window /* ... */ {
    /* ... */
    scroll(options?: ScrollToOptions): void;
    scroll(x: number, y: number): void;
    scrollBy(options?: ScrollToOptions): void;
    scrollBy(x: number, y: number): void;
    scrollTo(options?: ScrollToOptions): void;
    scrollTo(x: number, y: number): void;
}

←Back to home