先触发 mousedown，再 mouseup，最后 click；click 是否触发取决于 mousedown 和 mouseup 是否发生在同一元素、时间间隔短且无明显位移。
click 和 mousedown 的触发顺序是固定的：先 mousedown，再 mouseup，最后 click。这个顺序在所有主流浏览器中一致，但 click 是否真正触发，取决于 mousedown 和 mouseup 是否满足“同一元素、短时间、无明显位移”三个条件。
标准点击流程的事件顺序
当用户在某个元素上快速单击左键时，浏览器按以下顺序派发事件：
- mousedown：鼠标按钮一按下就立即触发，不等松开
- mouseup：鼠标在**同一元素内**松开时触发
- click：仅当 mousedown 和 mouseup 都发生在该元素、间隔通常
为什么 click 有时不出现
即使你看到 mousedown 和 mouseup 都执行了，click 仍可能被跳过。常见原因包括：
- 按下后鼠标移出元素再松开 → mouseup 在别的元素上，click 不触发
- 按住超过约 600ms（浏览器差异）→ 系统视为长按，抑制 click
- 目标是 disabled 的 button 或 input → mousedown 可能仍发生，但 click 被浏览器屏蔽
- 在 mousedown 中调用了 preventDefault() 并影响了后续默认行为（尤其在移动端或模拟触控环境）
怎么用它们做不同交互
别把两个事件混着用，它们语义和用途完全不同：
- 用 mousedown 做即时反馈：比如按钮按下的视觉变化、拖拽起点记录、游戏按键响应
- 用 click 做确定性操作：比如跳转链接、提交表单、切换开关状态 —— 它天然兼容键盘（Enter/Space）、无障碍访问，且语义清晰
- 想区分“点一下”和“按住不动”，不能只靠 mousedown；需结合 mouseup 时间戳和位移判断，或用 setTimeout + clearTimeout 实现防长按逻辑
快速验证方法
在控制台贴入这段代码，点击任意元素就能看到真实顺序：
element.addEventListener('mousedown', () => console.log('↓ mousedown'));element.addEventListener('mouseup', () => console.log('↑ mouseup'));
element.addEventListener('click', () => console.log('✓ click'));
输出一定是 ↓ → ↑ → ✓，连续点击会重复该序列。如果缺了 ✓，说明触发条件没满足。
