PointerEvent 常用属性与事件整理【JavaScript】

[PointerEvent 常用属性与事件整理](#PointerEvent 常用属性与事件整理)
[一、PointerEvent 常用属性](#一、PointerEvent 常用属性)
- [1. button ------ 本次按下的是哪个按钮 ⭐⭐⭐](#1. button —— 本次按下的是哪个按钮 ⭐⭐⭐)
- [2. buttons ------ 当前有哪些按钮正在按住 ⭐⭐⭐](#2. buttons —— 当前有哪些按钮正在按住 ⭐⭐⭐)
- - [button 和 buttons 的区别](#button 和 buttons 的区别)
二、坐标相关属性
- [3. clientX / clientY ------ 相对于浏览器视口 ⭐⭐⭐](#3. clientX / clientY —— 相对于浏览器视口 ⭐⭐⭐)
- - 适用场景
- [4. pageX / pageY ------ 相对于整个网页](#4. pageX / pageY —— 相对于整个网页)
- [5. screenX / screenY ------ 相对于整个电脑屏幕](#5. screenX / screenY —— 相对于整个电脑屏幕)
[三、PointerEvent 特有属性](#三、PointerEvent 特有属性)
- [6. pointerId ------ 指针 ID ⭐⭐⭐](#6. pointerId —— 指针 ID ⭐⭐⭐)
- [7. pointerType ------ 指针类型 ⭐⭐⭐](#7. pointerType —— 指针类型 ⭐⭐⭐)
四、压力和触控笔相关属性
- [8. pressure ------ 压力大小 ⭐⭐](#8. pressure —— 压力大小 ⭐⭐)
- [9. width ------ 指针接触区域宽度](#9. width —— 指针接触区域宽度)
- [10. height ------ 指针接触区域高度](#10. height —— 指针接触区域高度)
- [11. tiltX ------ 触控笔 X 方向倾斜角度](#11. tiltX —— 触控笔 X 方向倾斜角度)
- [12. tiltY ------ 触控笔 Y 方向倾斜角度](#12. tiltY —— 触控笔 Y 方向倾斜角度)
[五、DOM 相关属性 ⭐⭐⭐](#五、DOM 相关属性 ⭐⭐⭐)
- [13. target ------ 真正触发事件的元素](#13. target —— 真正触发事件的元素)
- [14. currentTarget ------ 当前绑定事件的元素](#14. currentTarget —— 当前绑定事件的元素)
- - 记忆方法
[六、事件控制方法 ⭐⭐⭐](#六、事件控制方法 ⭐⭐⭐)
- [15. preventDefault() ------ 阻止浏览器默认行为](#15. preventDefault() —— 阻止浏览器默认行为)
- [16. stopPropagation() ------ 阻止事件冒泡](#16. stopPropagation() —— 阻止事件冒泡)
[七、PointerEvent 常用事件 ⭐⭐⭐](#七、PointerEvent 常用事件 ⭐⭐⭐)
- [1. pointerdown ------ 指针按下](#1. pointerdown —— 指针按下)
- [2. pointerup ------ 指针松开](#2. pointerup —— 指针松开)
- [3. pointermove ------ 指针移动 ⭐⭐⭐](#3. pointermove —— 指针移动 ⭐⭐⭐)
- [4. pointerenter ------ 指针进入元素](#4. pointerenter —— 指针进入元素)
- [5. pointerleave ------ 指针离开元素](#5. pointerleave —— 指针离开元素)
- [6. pointerover ------ 指针进入元素](#6. pointerover —— 指针进入元素)
- [7. pointerout ------ 指针离开元素](#7. pointerout —— 指针离开元素)
- [8. pointercancel ------ 指针操作被取消](#8. pointercancel —— 指针操作被取消)
八、最常用属性速查表
九、最常用事件速查表
十、实际前端拖拽案例
[十一、`button` 和 `buttons` 一定要分清](#十一、button 和 buttons 一定要分清)
[十二、最终记忆版 ⭐⭐⭐](#十二、最终记忆版 ⭐⭐⭐)

PointerEvent 常用属性与事件整理

PointerEvent 是浏览器提供的指针事件对象，可以统一处理：

🖱️ 鼠标（Mouse）
📱 触摸屏（Touch）
✏️ 触控笔（Pen）

例如：

ts 复制代码

const handlePointerDown = (e: PointerEvent) => {
  console.log(e)
}

一、PointerEvent 常用属性

1. button ------ 本次按下的是哪个按钮 ⭐⭐⭐

ts 复制代码

e.button

常见值：

text 复制代码

0 → 左键
1 → 中键（鼠标滚轮按下）
2 → 右键
3 → 第四键
4 → 第五键

例如：

ts 复制代码

if (e.button !== 0) return

表示：

只响应鼠标左键。

2. buttons ------ 当前有哪些按钮正在按住 ⭐⭐⭐

ts 复制代码

e.buttons

常见值：

text 复制代码

0 → 没有按钮
1 → 左键
2 → 右键
4 → 中键

buttons 是一个位掩码（bitmask），所以多个按钮可以同时处于按下状态。

例如：

ts 复制代码

if (e.buttons & 1) {
  console.log('左键正在按住')
}

button 和 buttons 的区别

text 复制代码

button
↓
这一次事件是哪个按钮触发的

buttons
↓
当前有哪些按钮正在被按住

简单记：

text 复制代码

button  → 这一下按了谁
buttons → 现在谁还按着

二、坐标相关属性

3. clientX / clientY ------ 相对于浏览器视口 ⭐⭐⭐

ts 复制代码

e.clientX
e.clientY

表示指针相对于浏览器可视区域左上角的位置。

text 复制代码

浏览器视口

(0, 0)
┌──────────────────────┐
│                      │
│         🖱️           │
│        (300,200)     │
│                      │
└──────────────────────┘

例如：

ts 复制代码

console.log(e.clientX)
console.log(e.clientY)

得到：

text 复制代码

300
200

适用场景

非常常用：

text 复制代码

拖拽
Canvas
鼠标跟随
框选
工作流节点移动
元素定位

4. pageX / pageY ------ 相对于整个网页

ts 复制代码

e.pageX
e.pageY

表示指针相对于整个 HTML 文档的位置。

和 clientX/Y 的主要区别：

text 复制代码

clientX / clientY
→ 相对于浏览器当前可视区域

pageX / pageY
→ 相对于整个网页

当页面发生滚动时，两者可能不同。

例如：

text 复制代码

整个网页
│
│   页面上方内容
│
│   页面上方内容
│
├───────────────
│   浏览器视口
│
│       🖱️
│
└───────────────

pageY 会把已经滚出浏览器视口的页面高度也计算进去。

5. screenX / screenY ------ 相对于整个电脑屏幕

ts 复制代码

e.screenX
e.screenY

表示指针相对于整个操作系统屏幕的位置。

text 复制代码

整个电脑屏幕
┌────────────────────────────┐
│                            │
│           🖱️              │
│                            │
└────────────────────────────┘

前端业务中一般没有 clientX/Y 常用。

三、PointerEvent 特有属性

6. pointerId ------ 指针 ID ⭐⭐⭐

ts 复制代码

e.pointerId

表示当前指针的唯一 ID。

例如鼠标：

text 复制代码

pointerId = 1

触摸屏同时放两个手指：

text 复制代码

手指 A → pointerId = 1
手指 B → pointerId = 2

因此可以用它区分多个同时存在的触摸点。

7. pointerType ------ 指针类型 ⭐⭐⭐

ts 复制代码

e.pointerType

常见值：

text 复制代码

"mouse" → 鼠标
"touch" → 触摸屏
"pen"   → 触控笔

例如：

ts 复制代码

if (e.pointerType === 'mouse') {
  console.log('鼠标操作')
}

if (e.pointerType === 'touch') {
  console.log('触摸操作')
}

if (e.pointerType === 'pen') {
  console.log('触控笔操作')
}

非常适合做：

text 复制代码

PC 鼠标操作
移动端触摸操作
触控笔操作

四、压力和触控笔相关属性

8. pressure ------ 压力大小 ⭐⭐

ts 复制代码

e.pressure

表示指针施加的压力。

通常范围：

text 复制代码

0 ~ 1

例如：

text 复制代码

轻轻写 → 0.2
正常写 → 0.5
用力写 → 1

可以用来实现画笔粗细：

ts 复制代码

const lineWidth = e.pressure * 10

常用于：

text 复制代码

Canvas 画板
电子签名
手写
绘图
触控笔

9. width ------ 指针接触区域宽度

ts 复制代码

e.width

表示指针与屏幕接触区域的宽度。

触摸屏上比较有意义。

10. height ------ 指针接触区域高度

ts 复制代码

e.height

表示指针与屏幕接触区域的高度。

例如手指接触屏幕：

text 复制代码

       手指
    ┌────────┐
    │        │
    │        │
    └────────┘
       ↑  ↑
       │  │
     width
          height

11. tiltX ------ 触控笔 X 方向倾斜角度

ts 复制代码

e.tiltX

表示触控笔在 X 方向的倾斜角度。

一般范围：

text 复制代码

-90 ~ 90

12. tiltY ------ 触控笔 Y 方向倾斜角度

ts 复制代码

e.tiltY

表示触控笔在 Y 方向的倾斜角度。

一般范围：

text 复制代码

-90 ~ 90

主要用于：

text 复制代码

绘图
手写
电子笔
Canvas

普通后台管理系统一般很少用。

五、DOM 相关属性 ⭐⭐⭐

这些属性不是 PointerEvent 独有，但使用 PointerEvent 时经常会用到。

13. target ------ 真正触发事件的元素

ts 复制代码

e.target

例如：

html 复制代码

<div id="parent">
  <button>点击</button>
</div>

监听：

ts 复制代码

parent.addEventListener('pointerdown', (e) => {
  console.log(e.target)
})

点击 button：

text 复制代码

e.target
↓
button

14. currentTarget ------ 当前绑定事件的元素

ts 复制代码

e.currentTarget

还是：

html 复制代码

<div id="parent">
  <button>点击</button>
</div>

如果事件绑定在：

ts 复制代码

parent.addEventListener('pointerdown', (e) => {
  console.log(e.currentTarget)
})

点击 button：

text 复制代码

e.target
↓
button

e.currentTarget
↓
parent

记忆方法

text 复制代码

target
→ 谁真正触发了事件

currentTarget
→ 事件绑定在谁身上

六、事件控制方法 ⭐⭐⭐

15. preventDefault() ------ 阻止浏览器默认行为

ts 复制代码

e.preventDefault()

例如：

ts 复制代码

element.addEventListener('pointermove', (e) => {
  e.preventDefault()
})

可以阻止某些浏览器默认行为。

常见于：

text 复制代码

拖拽
触摸操作
Canvas
自定义手势

16. stopPropagation() ------ 阻止事件冒泡

ts 复制代码

e.stopPropagation()

例如：

html 复制代码

<div id="parent">
  <button id="child">点击</button>
</div>

正常情况下：

text 复制代码

button
  ↓
parent
  ↓
body
  ↓
document

事件会不断向父元素传播。

如果：

ts 复制代码

e.stopPropagation()

就可以阻止继续向上冒泡。

七、PointerEvent 常用事件 ⭐⭐⭐

1. pointerdown ------ 指针按下

ts 复制代码

element.addEventListener('pointerdown', (e) => {
  console.log('按下')
})

类似传统事件：

text 复制代码

mousedown
touchstart

2. pointerup ------ 指针松开

ts 复制代码

element.addEventListener('pointerup', (e) => {
  console.log('松开')
})

类似：

text 复制代码

mouseup
touchend

3. pointermove ------ 指针移动 ⭐⭐⭐

ts 复制代码

element.addEventListener('pointermove', (e) => {
  console.log(e.clientX, e.clientY)
})

非常常用。

例如：

text 复制代码

拖拽
Canvas
框选
鼠标跟随
工作流节点移动
流程图

4. pointerenter ------ 指针进入元素

ts 复制代码

element.addEventListener('pointerenter', () => {
  console.log('进入')
})

5. pointerleave ------ 指针离开元素

ts 复制代码

element.addEventListener('pointerleave', () => {
  console.log('离开')
})

6. pointerover ------ 指针进入元素

ts 复制代码

element.addEventListener('pointerover', () => {
  console.log('over')
})

和 pointerenter 类似，但事件传播机制有所区别。

7. pointerout ------ 指针离开元素

ts 复制代码

element.addEventListener('pointerout', () => {
  console.log('out')
})

8. pointercancel ------ 指针操作被取消

ts 复制代码

element.addEventListener('pointercancel', () => {
  console.log('操作被取消')
})

移动端尤其需要注意。

例如：

text 复制代码

用户正在触摸
      ↓
浏览器发生其他手势/系统操作
      ↓
当前 Pointer 操作被取消
      ↓
pointercancel

八、最常用属性速查表

属性	作用	常用程度
`button`	本次按下哪个按钮	⭐⭐⭐
`buttons`	当前哪些按钮正在按	⭐⭐⭐
`clientX`	相对视口 X	⭐⭐⭐
`clientY`	相对视口 Y	⭐⭐⭐
`pageX`	相对整个页面 X	⭐⭐
`pageY`	相对整个页面 Y	⭐⭐
`screenX`	相对屏幕 X	⭐
`screenY`	相对屏幕 Y	⭐
`pointerId`	指针 ID	⭐⭐⭐
`pointerType`	mouse/touch/pen	⭐⭐⭐
`pressure`	压力	⭐⭐
`width`	接触区域宽度	⭐
`height`	接触区域高度	⭐
`tiltX`	触控笔 X 倾斜	⭐
`tiltY`	触控笔 Y 倾斜	⭐
`target`	实际触发元素	⭐⭐⭐
`currentTarget`	当前绑定元素	⭐⭐⭐

九、最常用事件速查表

事件	含义	常见场景
`pointerdown`	按下	点击、拖拽开始
`pointerup`	松开	点击、拖拽结束
`pointermove`	移动	拖拽、画板
`pointerenter`	进入	hover
`pointerleave`	离开	hover
`pointerover`	进入	鼠标经过
`pointerout`	离开	鼠标离开
`pointercancel`	操作取消	移动端手势

十、实际前端拖拽案例

这是工作中非常常见的一种写法：

ts 复制代码

const handlePointerDown = (e: PointerEvent) => {
  // 只允许左键
  if (e.button !== 0) return

  console.log('指针类型：', e.pointerType)
  console.log('指针 ID：', e.pointerId)
  console.log('开始位置：', e.clientX, e.clientY)

  // 开始拖拽
}

移动：

ts 复制代码

const handlePointerMove = (e: PointerEvent) => {
  if (e.buttons !== 1) return

  console.log('当前位置：', e.clientX, e.clientY)

  // 更新元素位置
}

结束：

ts 复制代码

const handlePointerUp = (e: PointerEvent) => {
  console.log('拖拽结束')

  // 结束拖拽
}

十一、`button` 和 `buttons` 一定要分清

这是最容易混淆的地方。

ts 复制代码

e.button

问的是：

"这一次事件，是哪个按钮触发的？"

例如：

text 复制代码

0 → 左键
1 → 中键
2 → 右键

而：

ts 复制代码

e.buttons

问的是：

"现在有哪些按钮还处于按下状态？"

例如：

text 复制代码

0 → 没有
1 → 左键
2 → 右键
4 → 中键

所以：

ts 复制代码

if (e.button !== 0) return

非常适合判断：

是不是左键触发的这次操作。

而：

ts 复制代码

if (e.buttons !== 1) return

更接近：

当前是不是正处于"左键按住"的状态。

十二、最终记忆版 ⭐⭐⭐

如果暂时不想背那么多，只记下面这些：

text 复制代码

PointerEvent
│
├── 鼠标按钮
│   ├── button       → 这次按了哪个键
│   └── buttons      → 现在哪些键还按着
│
├── 坐标
│   ├── clientX/Y    → 浏览器视口
│   ├── pageX/Y      → 整个网页
│   └── screenX/Y    → 整个电脑屏幕
│
├── 指针信息
│   ├── pointerId    → 哪一个指针
│   ├── pointerType  → mouse / touch / pen
│   └── pressure     → 压力
│
├── DOM
│   ├── target       → 真正触发事件的元素
│   └── currentTarget → 当前绑定事件的元素
│
└── 事件控制
    ├── preventDefault()
    └── stopPropagation()

最核心的几个：

ts 复制代码

e.button
e.buttons

e.clientX
e.clientY

e.pointerId
e.pointerType

e.target
e.currentTarget

以及：

ts 复制代码

pointerdown
pointermove
pointerup
pointerenter
pointerleave
pointercancel

这几个掌握以后，日常 Vue 前端里的点击、拖拽、框选、Canvas、工作流节点移动、鼠标交互 基本就能看懂大部分 PointerEvent 代码了。

PointerEvent 常用属性与事件整理【JavaScript】

目录