必须用 addeventlistener 绑定目标区域点击事件，显式设置 capture: true 防拦截，并搭配 performance.now() 高精度计时与 50ms 去重防误触，移动端需额外监听 touchstart 并 preventdefault() 消除 300ms 延迟。
怎么用 addEventListener 绑定点击不漏点
手速测试的核心是「准确捕获每一次点击」，但直接用 onclick 或在 div 上监听容易漏点——尤其快速连点时，浏览器可能合并事件或触发延迟。必须用 addEventListener 并配合 passive: false（虽然点击默认不 passive，但显式声明更稳妥）。
常见错误：给整个页面加 click 监听，结果用户点空白、点按钮、甚至右键都计入；正确做法是只监听目标区域（比如一个 div#target），且禁用默认长按/缩放行为干扰：
const target = document.getElementById('target');
target.addEventListener('click', handleHit, { capture: true }); // capture 确保不被子元素 stopPropagation 拦截
- 别用
mousedown替代click—— 它会把拖拽、误触都算进来，且移动端 touchstart 更复杂 - 避免在
handleHit里做耗时操作（如 DOM 重绘、console.log），否则后续点击回调被阻塞 - 移动端需额外加
touchstart并preventDefault()，否则 click 有 300ms 延迟
Date.now() 和 performance.now() 选哪个计时
手速测试要求毫秒级精度，Date.now() 只能到 1ms，且受系统时间调整影响（如 NTP 同步）；performance.now() 返回浮点数，精度达微秒级，且单调递增，是唯一可靠选择。
实操要点：
- 开始计时必须在第一点击前调用：
startTime = performance.now()，不能等第一次点击再记——否则首击延迟被计入 - 每次点击记录：
hits.push(performance.now())，最后用hits[hitIndex] - startTime算单次耗时 - 别用
new Date().getTime()，它和Date.now()行为一致，无优势
怎么防抖/限频不误伤真实手速
用户疯狂点击时，浏览器可能在极短时间内触发多个事件（尤其鼠标连点或触摸屏多点），但手速测试要的是「有效点击」，不是「硬件触发次数」。需要轻量去重，而非粗暴节流。
推荐策略：以 50ms 为窗口去重（人类物理点击极限约 10Hz，即 100ms 一次，50ms 是安全余量）：
let lastClick = 0;
function handleHit() {
const now = performance.now();
if (now - lastClick
- 别用
setTimeout防抖——它会让最后一次点击延迟生效，破坏实时反馈 - 50ms 是经验值，低于 40ms 可能误杀双击；高于 80ms 会把连点当单次（如 70ms 间隔的两下只计 1 次）
- 这个逻辑必须放在事件回调最开头，确保不执行任何多余代码就返回
为什么移动端点击总比 PC 慢 100–200ms
这不是 bug，是 iOS/Android 默认的「点击延迟」：系统等待 300ms 判断用户是否要双击缩放。即使你没注册双击事件，浏览器仍保留该行为。
解决方法只有两个，且必须同时用：
- 在
加：<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">（禁用缩放是前提） - 对目标元素监听
touchstart并立刻event.preventDefault()，然后手动触发逻辑：target.addEventListener('touchstart', e => { e.preventDefault(); handleHit(); // 复用 click 的处理逻辑 }); - 注意：
touchstart不会冒泡到 document，所以监听必须挂在具体目标上，不能靠事件委托
做完这两步，移动端点击延迟可压到 10ms 内，和 PC 基本一致。漏掉任一环节，都会回到「明明点得快，统计却慢半拍」的状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
