高端t恤定制网站网站建设运营必备人员

浏览器相关知识点

1、坐标系

• 浏览器的坐标系是以左上角为原点，向右为 X 增加，向下为 Y 增加

解释：

const currentY = e.touches[0].clientY;

这个 clientY 是触点相对于视口顶部的 Y 坐标。

拖动时的变化：

• 手指向下拖动：Y 坐标变大 → clientY 增加
• 手指向上拖动：Y 坐标变小 → clientY 减少

也就是说，你越往上拉，手指越靠近屏幕顶部，它的 Y 值就越小

2、addEventListener参数相关讲解

element.addEventListener(type, listener, useCapture);

• type：事件类型，比如 “touchstart”
• listener：回调函数，比如 handleTouchStart
• useCapture（可选）：布尔值，表示是否在 捕获阶段 触发回调

什么是“捕获阶段”？

事件传播有三个阶段：

1、捕获阶段（capture phase）：事件从顶层往目标元素传递（document → html → body …）

2、目标阶段（target phase）：事件到达目标元素

3、冒泡阶段（bubble phase）：事件从目标元素往上返回（… body → html → document）

如果你把 useCapture 设置为：

• false（默认）👉 回调只在冒泡阶段执行

• true 👉 回调只在捕获阶段执行

举个例子：

parent.addEventListener("touchstart", () => console.log("parent"), false);
child.addEventListener("touchstart", () => console.log("child"), false);

你点击 child，输出是

child
parent

但如果写成

parent.addEventListener("touchstart", () => console.log("parent"), true);

输出就会变成

parent
child