HTML本身不提供手势识别能力，所有手势逻辑均需JavaScript基于touchstart/touchmove/touchend事件手动实现，通过坐标差值、时间阈值和preventDefault()控制判断滑动等行为。
HTML里没有原生手势识别API
直接说结论：纯 HTML 标签本身不提供手势识别能力，touchstart、touchmove、touchend 这些事件才是实际入口。所谓“HTML手势识别”，本质是用 JavaScript 监听触摸事件，再通过位移、时间、方向等条件判断滑动意图。
常见误区是以为加个 ontouchstart 属性就能识别左滑右滑——不行，它只触发，不分析。真正要识别“滑动”，得自己算坐标差值和速度。
用 touchmove + 位移阈值判断左右滑动
最轻量、兼容性最好的做法：记录起始 touchstart 的 clientX，在 touchend 时对比结束位置，差值超过阈值（比如 30px）就判定为滑动。
- 必须阻止默认行为（
e.preventDefault()）才能避免页面滚动干扰滑动判断 - 阈值不能设太小（易误触），也不宜太大（响应迟钝），30–50px 是较稳妥的起点
- 只看 X 轴位移，忽略 Y 轴小偏移（比如用户本意是水平滑但手指略带下压）
- 建议加一个时间窗口限制：从
touchstart到touchend超过 300ms 的，不视为有效滑动，避免慢速拖拽被误判
let startX = 0;
let startTime = 0;
<p>element.addEventListener('touchstart', e => {
startX = e.touches[0].clientX;
startTime = Date.now();
});</p><p>element.addEventListener('touchend', e => {
const endX = e.changedTouches[0].clientX;
const diffX = endX - startX;
const duration = Date.now() - startTime;</p><p>if (Math.abs(diffX) > 30 && duration < 300) {
if (diffX > 0) console.log('swipe right');
else console.log('swipe left');
}
});为什么不用 gesturestart / gesturechange？
这些事件曾存在于旧版 iOS Safari（iOS 2–4），但早已被废弃，现代浏览器（包括当前 Safari、Chrome、Firefox）完全不支持。试图监听 gesturestart 不会报错，但永远收不到事件——代码静默失效，极难排查。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
替代方案只有两类：
- 基于
touch*事件的手动实现（上文方式），控制力强、兼容性好 - 引入第三方库如
hammer.js或interact.js，但要注意它们内部仍是封装了touch*逻辑，并非调用系统级手势 API
别被文档里“gesture”字样误导——浏览器没给你开放多点缩放、双击等系统级手势的 JS 接口，所有“手势”都是模拟出来的。
移动端真机调试时滑动不生效的常见原因
本地开发时在 Chrome 模拟器里能跑通，一上真机就失效，大概率是这几个点漏了：
-
touch-action: none没加在目标元素上 → 浏览器仍会尝试执行默认滚动/缩放，吞掉你的touch事件 - 父容器有
overflow: hidden或position: fixed，导致事件冒泡被截断 - 监听对象不是直接触发触摸的元素（比如绑在
document上但没做e.target过滤），在多层嵌套结构中容易失准 - iOS Safari 对快速连续 touch 有延迟优化（约 300ms），虽然不影响
touchstart，但可能让touchend时间计算偏移，建议用e.changedTouches而非e.touches
最省事的验证方式：在 touchstart 里打个 console.log，真机连 Safari Web Inspector 看有没有输出——没输出，说明事件根本没到你这儿，优先查 CSS 的 touch-action 和层级遮挡。
