按钮最小触控尺寸必须≥44px，因ios和android规范要求可点击区域不小于44px×44px，否则易点偏、误触或被系统判为无效触摸；需用min-height+padding、flex居中、16px字体等综合实现。
按钮最小触控尺寸为什么必须 ≥44px
因为 iOS 和 Android 官方人机交互指南都明确要求可点击区域最小为 44px × 44px，低于这个尺寸，手指容易点偏、连带误触邻近元素，甚至被系统判定为无效触摸。单纯设 height: 44px 不行——文字可能被截断或垂直错位。
实操建议：
- 用 min-height: 44px + padding: 12px 16px 保底，不硬压高度
- 配合 display: flex; align-items: center; 居中文本，比 line-height 更稳
- 字体至少 font-size: 16px，避免小屏缩字后热区缩水
- 别给按钮加 user-select: none，它会破坏长按复制等正常操作
为什么 onclick 在移动端常“卡一下”才响应
这是浏览器保留的约 300ms 点击延迟，用于判断用户是否要双击缩放页面。在菜单展开、表单提交这类需要即时反馈的场景下，这延迟直接导致误触感知——用户以为没点上，于是再点一次。
实操建议：
- 改用 pointerdown 事件替代 onclick：无延迟、兼容触控/鼠标/笔，且不影响键盘 Enter/Space 触发
- 若必须用 touchstart，记得加 { passive: false }，否则 preventDefault() 失效
- 确保 <meta name="viewport"> 包含 user-scalable=no 或 maximum-scale=1.0，否则延迟无法消除
连续点击导致重复提交怎么锁住按钮
只设 button.disabled = true 不够——网络慢时用户刷新页面，disabled 状态丢失；只靠 API 返回再恢复，失败后按钮就永远灰掉。
实操建议：
- 点击后立即禁用：button.disabled = true
- 同步加视觉反馈，比如插入 <span class="spinner"></span> 或改文案为“提交中…”
- 用 setTimeout 固定时间后恢复（如 1000ms），不依赖接口返回
- 键盘触发也要同步处理：keydown 中判断 event.code === 'Enter' || event.code === 'Space'
- 恢复前检查按钮是否仍处于禁用态，避免定时器叠加触发多次恢复
iOS Safari 双击缩放和误触怎么一并拦住
仅靠 JS 拦截 ondblclick 或 touchend 时间戳，挡不住 iOS 的原生双击缩放行为。它会穿透到页面层，导致面板跳动、文字放大、布局错乱。
实操建议：
- HTML 必须有：<meta name="viewport" content="user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">，且不能被 JS 动态覆盖
- CSS 加：touch-action: manipulation 到按钮及父容器，显式声明只响应点击
- JS 层补一层时间戳拦截：监听全局 touchend，若两次间隔 ≤ 300ms 就 event.preventDefault()
- 注意：touch-action: none 会彻底禁用所有手势，包括点击，千万别乱用
防误触不是加一层 loading 就完事，而是从热区尺寸、事件时机、状态锁定、平台特性四条线同时收口。漏掉任意一环，用户在低端安卓或旧版 iOS 上就可能点出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
