JavaScript 指针事件 (Pointer Events)

指针事件是现代浏览器提供的一种统一处理各种输入设备（如鼠标、触摸屏、触控笔等）的API。与传统的鼠标事件和触摸事件相比，指针事件提供了更一致的方式来处理不同类型的指针输入。

基本概念

指针事件将鼠标、触摸和触控笔输入统一为"指针"的概念。一个指针可以是：

• 鼠标
• 手指触摸
• 触控笔/手写笔
• 其他指向设备

主要指针事件

以下是主要的指针事件类型：

基本用法

element.addEventListener('pointerdown', (event) => {
  console.log('Pointer down:', event.pointerId, event.pointerType);
});

element.addEventListener('pointermove', (event) => {
  console.log('Pointer position:', event.clientX, event.clientY);
});

element.addEventListener('pointerup', (event) => {
  console.log('Pointer up');
});

指针事件对象属性

指针事件对象包含许多有用的属性：

• pointerId: 唯一标识当前指针的ID
• pointerType: 指针类型 ("mouse", "pen", "touch")
• isPrimary: 是否为主指针（通常是第一个接触点）
• width, height: 接触区域的宽度和高度
• pressure: 压力值（0-1，对于不支持压力的设备通常为0.5）
• tiltX, tiltY: 触控笔的倾斜角度
• tangentialPressure: 切向压力值
• twist: 触控笔的旋转角度

指针捕获

指针捕获允许元素在指针移动时持续接收事件，即使指针离开了元素边界：

element.addEventListener('pointerdown', (event) => {
  // 设置指针捕获
  element.setPointerCapture(event.pointerId);
});

element.addEventListener('pointermove', (event) => {
  if (event.pressure > 0.7) {
    // 高压操作
  }
});

element.addEventListener('lostpointercapture', (event) => {
  // 指针捕获丢失
});

与鼠标/触摸事件的比较

指针事件相比传统事件有以下优势：

1. 统一处理不同输入类型
2. 支持多点触控（每个触摸点有唯一ID）
3. 提供更多输入信息（压力、倾斜等）
4. 更好的性能（减少事件处理）

浏览器兼容性

现代浏览器都支持指针事件，但在旧浏览器中可能需要polyfill：

• PEP (Pointer Events Polyfill)

示例：简单的绘图应用

const canvas = document.getElementById('drawing-canvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('pointerdown', startDrawing);
canvas.addEventListener('pointermove', draw);
canvas.addEventListener('pointerup', stopDrawing);
canvas.addEventListener('pointerout', stopDrawing);

function startDrawing(e) {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
  e.preventDefault();
}

function draw(e) {
  if (!isDrawing) return;
  
  ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
  ctx.stroke();
  
  // 根据压力改变线条宽度
  ctx.lineWidth = e.pressure * 10;
}

function stopDrawing() {
  isDrawing = false;
}

指针事件为Web开发提供了更强大、更统一的输入处理方式，特别是在需要支持多种输入设备的交互式应用中非常有用。