移动端按钮点击延迟源于浏览器等待双击缩放，设置touch-action: manipulation并配合viewport中initial-scale=1.0可消除300ms延迟；需避免FastClick共存及弹层穿透问题。

移动端按钮点击延迟不是 JS 慢，而是浏览器在等你双击缩放——只要没明确告诉它“这里不需要”，就会卡满约 300ms。现代 iOS Safari（9.3+）和 Chrome（36+）支持 touch-action: manipulation 直接跳过等待，这是目前最轻量、最可靠的解法。

viewport 必须含 initial-scale=1.0 才生效

只写 不会消除延迟。iOS Safari 9.2 及更早版本、UC/QQ 浏览器旧版仍会等满 300ms。浏览器需要明确的缩放锚点，initial-scale=1.0 是触发双击判定优化的硬性条件。

常见错误：

• user-scalable=no 或 maximum-scale=1.0 才真正禁用双击缩放判断；minimum-scale=1.0 单独无效
• 拼错成 minimun-scale 会导致整个 meta 失效
• 该标签必须静态写在 内，动态插入或放在 里解析失败
• 若页面需保留图片双指放大能力，就不能用 user-scalable=no，得靠后续方案补位

touch-action: manipulation 的正确用法

它不是“禁用所有手势”，而是告诉浏览器：“此处只需响应点击和单指纵向滚动”。语义准确、滚动不卡、兼容 iOS 9.3+ 和 Chrome 36+。

实操要点：

• 只加在有点击意图的元素上，比如 、
  ；不要设在 html 或 body 上，否则页面无法滚动
• 原生可点击元素（、、）默认已有该行为，除非你写了 display: inline 或显式设了 touch-action: auto
• IE10/11 需加前缀：-ms-touch-action: manipulation

别让 FastClick 和 touch-action 共存

FastClick 用 JS 模拟 click 并阻止原生 click，touch-action: manipulation 让原生 click 立即触发——两者机制冲突，共存后常见按钮无响应、事件重复、顺序错乱。


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

排查方法：

• 控制台输入 window.FastClick，返回构造函数说明还在运行
• 全局搜索 FastClick.attach 或 new FastClick()
• 若已用 touch-action，直接删掉 FastClick 初始化代码，无需替换逻辑
• 老项目若保留 FastClick，必须确保它只挂载在 document.body 上，不能挂到 #app 或局部容器，否则动态弹层按钮会失效

穿透问题比延迟更难调试，且无法靠 JS 拦截

哪怕 touch-action 已生效，只要上层弹层在 touchend 后立刻 display: none 或移除，300ms 后原生 click 仍会落到下层按钮上——这跟延迟无关，是浏览器事件调度机制决定的。

解决方式只有两个：

• 用 pointer-events: none 临时禁用下层区域（注意：要配合 z-index 和层叠上下文）
• 改用 visibility: hidden 或 opacity: 0 配合 transition 动画收起弹层，确保 DOM 存在且可接收事件直到动画结束

这个细节容易被忽略，但一旦出现，用户点一次触发两次提交，比慢更致命。