---

title: Pointer Events 与 touch-action：滚动与手势性能

keywords:

• Pointer Events
• touch-action
• 手势
• 滚动
• preventDefault
• 被动监听

description: 总结 Pointer Events 的统一输入模型与 touch-action 的默认行为控制，给出在滚动与手势场景下的性能与可用性实践，并附参考。

categories:

• 文章资讯
• 技术教程

---

概述

Pointer Events 将鼠标、触摸与笔输入统一为 pointer* 事件，简化跨设备手势处理。touch-action 控制浏览器默认的触摸行为（滚动/缩放等），避免因阻止默认而导致滚动优化失效。

关键用法

• Pointer Events：使用 pointerdown/pointermove/pointerup/pointercancel 替代 mouse/touch，统一处理多输入类型；支持压力与指针类型等扩展［参考1］。
• touch-action：在可拖拽元素上设置 touch-action: pan-y/pan-x 允许轴向滚动，或 none 禁止默认行为以实现自定义手势；优先通过该属性而非在事件中 preventDefault［参考2］。

工程实践

• 与被动监听协作：在需要滚动优化的场景保持被动；通过 touch-action 指明禁止范围，减少阻塞。
• 可访问性：在自定义手势中提供键盘与鼠标回退；测试多设备与多平台行为。

参考与验证

• ［参考1］MDN 中文：Pointer Events 概览与用法：https://developer.mozilla.org/zh-CN/docs/Web/API/Pointer_events
• ［参考2］MDN 中文：touch-action 属性说明与示例：https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action
• ［参考3］web.dev：滚动与手势的性能与默认行为控制指南：https://web.dev/articles/avoid-large-layout-shifts

关键词校验

关键词与 Pointer/touch-action 与滚动手势性能一致。