click 事件仅在点击完成时触发一次，不会自动恢复样式；若需实现“按下变色、释放复原”的交互效果，应分别监听 mousedown 和 mouseup 事件，而非仅依赖 click。

`click` 事件仅在点击完成时触发一次，不会自动恢复样式；若需实现“按下变色、释放复原”的交互效果，应分别监听 `mousedown` 和 `mouseup` 事件，而非仅依赖 `click`。

在 Web 开发中，一个常见误区是认为 click 事件会“持续”响应用户交互过程——实际上，它只是一个离散的、单次触发的完成信号，发生在 mousedown 和 mouseup 之后。因此，仅用 click 修改样式（如 element.style.background = 'blue'）会导致样式永久保留，无法自动还原。

要实现类似原生按钮的“按压反馈”效果（即：鼠标按下时变色，松开后立即恢复），必须拆分处理两个阶段：

✅ mousedown：用户按下鼠标左键时触发，适合应用临时样式；
✅ mouseup：用户松开鼠标左键时触发，适合还原原始样式。

以下是优化后的完整示例代码：

const flexBox = document.querySelector('.flex');

flexBox.addEventListener('mousedown', () => {
  flexBox.style.background = 'blue';
});

flexBox.addEventListener('mouseup', () => {
  flexBox.style.background = 'black'; // 恢复为 CSS 中定义的初始色
});

⚠️ 注意事项：

• 若元素可能被拖拽出容器范围，建议同时监听 mouseleave 事件，防止 mouseup 未触发导致样式卡死：

  flexBox.addEventListener('mouseleave', () => {
    flexBox.style.background = 'black';
  });

• 更推荐的方式是使用 CSS :active 伪类实现纯样式层的按压反馈（无需 JS），语义更清晰、性能更高：

  .flex:active {
    background-color: blue;
  }

  此方案自动处理按下/释放状态，且支持触摸设备（配合 touch-action 优化）。

总结：click 不是“按下-释放”过程的代理，而是结果事件。需要过程式交互时，请优先选用 mousedown/mouseup 组合，或直接采用 CSS :active —— 简洁、可靠、可访问性更佳。