触屏与指针事件体系

3.4 触屏与指针事件体系

随着移动设备的普及，触屏交互成为前端交互的核心组成部分。

浏览器提供了专属的触摸事件体系处理多点触控操作，同时推出了统一的指针事件标准，兼容鼠标、触摸、触控笔等多种输入设备。

基于原生事件可以封装实现滑动、捏合、旋转等基础手势，满足移动端常见的交互需求。

3.4.1 Touch Events：touchstart/touchmove/touchend

Touch Events 是移动端专属的触摸事件体系，专门针对触屏多点触控设计，覆盖触摸按下、移动、抬起、中断的完整流程，是移动端触屏交互的底层基础。

一、核心触摸事件

二、触摸点列表核心属性

触摸事件原生支持多点触控，事件对象通过三类 TouchList 集合管理不同范围的触摸点，每个触摸点对应一个 Touch 对象：

单个 Touch 对象包含核心坐标属性：clientX/clientY（视口坐标）、pageX/pageY（页面坐标）、identifier（触摸点唯一ID，用于跟踪单根手指的移动轨迹）。

三、核心特点与注意事项

1. 事件冒泡：所有触摸事件默认支持冒泡，可通过 stopPropagation() 阻止传播。
2. 默认行为控制：touchmove 中调用 preventDefault() 可以阻止页面滚动、双指缩放等浏览器默认行为，但会禁用原生滚动体验，需谨慎使用。
3. 高频特性：touchmove 属于高频事件，复杂计算逻辑必须做节流处理，避免卡顿。
4. 无点击延迟：触摸事件无移动端 click 事件 300ms 的双击判定延迟，适合需要快速响应的交互。

四、基础示例：记录触摸起点

const touchArea = document.querySelector('.touch-area'); touchArea.addEventListener('touchstart', (e) => { const firstTouch = e.changedTouches[0]; console.log(`触摸起点：(${firstTouch.clientX}, ${firstTouch.clientY})`); });

3.4.2 Pointer Events：统一鼠标 / 触摸 / 触控笔事件

Pointer Events 是 W3C 推出的统一指针事件标准，将鼠标、触摸、触控笔等所有指针型输入设备统一为一套事件体系，无需分别编写鼠标和触摸两套逻辑，大幅降低多端适配的开发成本。

一、核心指针事件

一套事件同时兼容鼠标、触摸、触控笔，与鼠标事件模型高度对齐：

二、核心专属属性

三、核心优势

1. 一套代码多端兼容：无需分别适配鼠标和触摸，同一套事件逻辑自动适配所有输入设备。
2. 统一事件模型：与鼠标事件一致的事件流、冒泡机制与属性体系，学习与迁移成本低。
3. 原生多点支持：通过 pointerId 区分不同指针，原生支持多点触控、多笔输入场景。
4. 丰富输入信息：支持压感、倾斜等专业输入维度，满足绘画、设计类复杂交互需求。

现代主流浏览器均已原生支持 Pointer Events，是当前多端交互的推荐方案；低版本环境可通过 polyfill 兼容。

3.4.3 基础手势识别：滑动、捏合、旋转

原生事件仅提供基础的触摸状态，滑动、捏合、旋转等常用手势需要基于原生事件封装实现，通过记录触摸点的位置变化计算手势类型与参数。

一、滑动手势（Swipe）

实现原理

在touchstart阶段记录起点坐标，touchend阶段记录终点坐标，计算两点的距离与方向，结合时间阈值判断是否为有效滑动。

代码示例：四方向滑动识别

let startX = 0; let startY = 0; let startTime = 0; const SWIPE_DISTANCE = 30; // 最小滑动距离阈值 const SWIPE_DURATION = 300; // 最大滑动时间阈值 document.addEventListener('touchstart', (e) => { const touch = e.changedTouches[0]; startX = touch.clientX; startY = touch.clientY; startTime = Date.now(); }); document.addEventListener('touchend', (e) => { const touch = e.changedTouches[0]; const deltaX = touch.clientX - startX; const deltaY = touch.clientY - startY; const deltaTime = Date.now() - startTime; // 时间过长判定为非滑动 if (deltaTime > SWIPE_DURATION) return; // 判断水平或垂直滑动 if (Math.abs(deltaX) > Math.abs(deltaY)) { if (Math.abs(deltaX) > SWIPE_DISTANCE) { console.log(deltaX > 0 ? '右滑' : '左滑'); } } else { if (Math.abs(deltaY) > SWIPE_DISTANCE) { console.log(deltaY > 0 ? '下滑' : '上滑'); } } });

典型场景：轮播图滑动切换、页面侧滑返回、上下滑动切换内容。

二、捏合手势（Pinch）

实现原理

基于两个触摸点，touchstart记录两指初始距离，touchmove实时计算当前距离，通过距离比值得到缩放比例，实现捏合缩放交互。

代码示例：双指缩放

let initialDistance = 0; let currentScale = 1; const target = document.querySelector('.scale-element'); // 计算两个触摸点的直线距离 function getTouchDistance(touches) { const dx = touches[0].clientX - touches[1].clientX; const dy = touches[0].clientY - touches[1].clientY; return Math.sqrt(dx * dx + dy * dy); } target.addEventListener('touchstart', (e) => { if (e.touches.length === 2) { initialDistance = getTouchDistance(e.touches); e.preventDefault(); } }); target.addEventListener('touchmove', (e) => { if (e.touches.length === 2) { const nowDistance = getTouchDistance(e.touches); const scale = nowDistance / initialDistance * currentScale; target.style.transform = `scale(${scale})`; e.preventDefault(); } }); target.addEventListener('touchend', (e) => { if (e.touches.length < 2) { // 记录最终缩放比例，作为下次捏合的基准 currentScale = parseFloat(getComputedStyle(target).transform.split('(')[1]) || 1; } });

典型场景：图片查看器缩放、地图缩放、画布缩放交互。

三、旋转手势（Rotate）

实现原理

基于两个触摸点，计算两点连线的角度，通过角度变化量得到旋转角度，应用到元素的旋转属性上。

核心计算逻辑

// 计算两个触摸点连线的角度（角度制） function getTouchAngle(touches) { const dx = touches[1].clientX - touches[0].clientX; const dy = touches[1].clientY - touches[0].clientY; return Math.atan2(dy, dx) * 180 / Math.PI; }

touchstart 记录初始角度，touchmove 实时计算当前角度与初始角度的差值，即为旋转角度，通过 transform: rotate() 应用到元素上。

典型场景：图片旋转、画布旋转、3D视角调整。

四、手势实现注意事项

1. 阈值优化：合理设置距离、时间阈值，避免轻微触碰导致的误触发，提升操作精准度。
2. 默认行为拦截：手势操作过程中通常需要调用 preventDefault() 阻止页面滚动、缩放等默认行为，避免干扰手势。
3. 性能处理：touchmove 中频繁计算与样式修改需注意性能，避免高频触发重排。
4. 复杂手势：拖拽、长按、多指组合等复杂手势推荐使用成熟的手势库（如 Hammer.js），降低自研成本与兼容性问题。