浏览器相关知识点
浏览器相关知识点
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