触觉反馈需在用户真实交互事件（如click、touchstart）的同步回调中直接调用navigator.vibrate()，且须满足HTTPS/localhost安全上下文、设备触感已启用等前提；传入数字或数组参数控制震动模式，并须做兼容性检测与降级处理。
要在用户触发特定原始 DOM 事件时提供触觉反馈，核心是把 navigator.vibrate() 正确绑定到合法的手势事件中，并确保调用发生在同步、非延迟的上下文里。不能靠“等一会儿再震”，也不能在页面加载完就自动震——浏览器会直接忽略。
必须满足的触发前提
震动 API 不是想调就调的普通函数，它有硬性安全限制：
- 只能在用户真实交互事件的回调函数中**直接调用**，比如
click、touchstart、keydown（需为可触发输入的元素） - 不能包裹在
setTimeout、Promise.then、requestAnimationFrame或任何异步逻辑里，哪怕只延迟 0 毫秒也不行 - 页面必须运行在安全上下文（HTTPS 或
localhost），否则 Chrome 会报 “Only secure contexts can use Vibration API” - 首次调用前，设备需已开启系统级触感反馈（iOS 要进「辅助功能→触感反馈」手动打开；Android 通常默认开启，但部分厂商可能限制）
支持的事件类型与推荐写法
不是所有 DOM 事件都适合绑震动，优先选明确、即时、用户意图清晰的事件：
-
按钮点击：最稳妥，用
click或touchstart（移动端更准）button.addEventListener('click', () => navigator.vibrate(60)); -
表单提交：可在
submit事件中触发，但注意别和防重复提交逻辑冲突form.addEventListener('submit', e => { e.preventDefault(); navigator.vibrate([40, 20, 40]); }); -
键盘确认：比如搜索框按回车，用
keydown判断e.key === 'Enter'input.addEventListener('keydown', e => { if (e.key === 'Enter') navigator.vibrate(50); }); -
开关切换：监听
change事件对 checkbox / switch 更自然checkbox.addEventListener('change', () => navigator.vibrate(30));
参数设置与兼容性处理
震动效果不是越长越好，要兼顾体验和平台限制：
- 传数字：如
navigator.vibrate(100)表示震动 100ms；iOS 实际只接受 ≤15ms 的单次值（常取10或15），且仅当触感反馈开启才生效 - 传数组：如
navigator.vibrate([100, 50, 80])表示「震100ms → 停50ms → 震80ms」；安卓支持，iOS 完全不认，会静默失败 - 清空震动：用
navigator.vibrate(0)可中断当前震动，适合长按场景的取消反馈 - 务必做兼容检测：
if ('vibrate' in navigator) { /* 安全调用 */ } else { /* 降级：播放提示音或视觉动效 */ }
常见失效原因与快速排查
如果写了代码却没震动，大概率卡在这几个环节：
- 事件监听写在
DOMContentLoaded里，但震动调用放在了setTimeout中 → 改成事件回调内直接调 - iOS 真机没开「辅助功能→触感反馈」→ 提示用户去设置里打开
- 安卓 App 打包环境未在
manifest.json勾选震动权限 → 检查原生配置 - 连续快速点击导致震动被覆盖 → 加简单节流，比如记录上一次调用时间，间隔至少 50ms 再允许下一次
