HTML中如何获取触摸事件的坐标信息-html教程-PHP中文网

绝大多数情况该用 event.targetTouches[0]，因其只返回落在当前绑定元素上的手指，避免跨区域干扰；pageX/pageY 更稳定，不受滚动影响；touchend 中必须用 changedTouches[0]；所有读取前需判断 length > 0；preventDefault() 应在 touchstart 中按需调用。

html中如何获取触摸事件的坐标信息

touchstart/touchmove 里该读 touches 还是 targetTouches？

绝大多数情况该用 event.targetTouches[0]，而不是 event.touches[0]。前者只返回落在当前绑定元素上的手指，后者是全屏所有手指——如果页面有多个可触控区域（比如轮播图+底部菜单），touches 可能混入其他区域的手指，导致坐标错乱或逻辑误判。

常见错误现象：手指在 A 区域按下，滑动到 B 区域后仍被当作 A 的拖拽继续响应；或者双指操作时单指抬起后 touches[0] 突然变成另一根手指，造成坐标跳变。

始终优先用 event.targetTouches，它和事件绑定目标严格对齐
若需支持多指（如双指缩放），再考虑 event.touches，但必须按 identifier 匹配手指生命周期
event.changedTouches 仅用于识别“本次刚按/刚抬”的手指，比如 touchend 中必须用它，否则可能读到已离开的手指

pageX/pageY 和 clientX/clientY 到底该选哪个？

pageX/pageY 是更稳的选择。它们以整个文档左上角为原点，不受页面滚动影响；而 clientX/clientY 以视口左上角为原点，一旦页面滚动，数值会突变——这在实现拖拽、滑块、画布等需要连续坐标的场景中极易出 bug。

使用场景举例：一个固定定位的弹窗内做手势识别，用户边滚动页面边操作弹窗。此时用 clientX 会因滚动偏移导致手势轨迹断裂；用 pageX 就能保持坐标连贯。

拖拽、滑动、手势识别类逻辑，一律用 pageX/pageY
仅当你要做“相对于当前可视区”的快速定位（如 tooltip 跟随手指）且确保不滚动时，才考虑 clientX/clientY
别忘了加空值判断：if (event.targetTouches.length > 0) { const t = event.targetTouches[0]; ... }

touchend 事件里为什么不能直接用 targetTouches[0]？

因为手指已经抬起，event.targetTouches 此时为空数组——targetTouches 只包含“当前仍接触目标元素”的手指，touchend 触发时它已不满足条件。这时候必须用 event.changedTouches[0]，它明确记录了“本次事件中状态变化的手指”，也就是刚刚抬起的那一根。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

典型错误：在 touchend 回调里写 const t = event.targetTouches[0]，结果报 Cannot read property 'pageX' of undefined。