点击事件（click）只在鼠标按下再释放后触发一次，不会自动还原样式；若要实现“按住变色、松开复原”的效果，需分别监听 mousedown 和 mouseup 事件并手动控制样式。
点击事件（click）只在鼠标按下再释放后触发一次，不会自动还原样式；若要实现“按住变色、松开复原”的效果，需分别监听 mousedown 和 mouseup 事件并手动控制样式。
在 Web 开发中，一个常见误区是认为 click 事件天然具备“瞬时反馈”语义——例如期望元素点击时短暂变色、松开即恢复。但事实是：click 是离散的、单次触发的事件，它仅表示“一次完整的点击动作已完成”，并不会自动回滚任何 DOM 修改。你通过 a.style.background = 'blue' 设置的内联样式会持续存在，直到被显式覆盖或页面重载。
要实现真正的“按下变色、松开复原”效果，应使用更底层的鼠标事件组合：
- mousedown：鼠标按键被按下时立即触发 → 此时应用高亮样式；
- mouseup：鼠标按键被释放时触发 → 此时恢复原始样式。
✅ 正确示例代码如下：
const flexBox = document.querySelector('.flex');
flexBox.addEventListener('mousedown', () => {
flexBox.style.backgroundColor = 'blue';
});
flexBox.addEventListener('mouseup', () => {
flexBox.style.backgroundColor = 'black'; // 与 CSS 中 .flex 的 background-color 一致
});
⚠️ 注意事项：
- 避免硬编码颜色值（如 'black'），推荐通过 CSS 类切换实现样式解耦：
.flex { background-color: black; } .flex.active { background-color: blue; }flexBox.addEventListener('mousedown', () => flexBox.classList.add('active')); flexBox.addEventListener('mouseup', () => flexBox.classList.remove('active')); - 若需兼容鼠标移出容器时取消激活态（例如用户按住拖出再松开），可补充 mouseleave 事件：
flexBox.addEventListener('mouseleave', () => flexBox.classList.remove('active')); - 不要混用 click 与 mousedown/mouseup 处理同一视觉反馈逻辑，否则易导致状态不一致。
总结：click 是语义化操作事件，适合提交、跳转等“完成型”行为；而视觉反馈（如按压态）应交由 mousedown/mouseup/mouseleave 等底层事件精准控制，这是构建可预测、可维护交互体验的关键实践。
