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

--- 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 与滚动手势性能一致。