能否仅用纯CSS实现点击按住按钮后外部释放的样式切换？

数据老陈

2026-6-2

替代方案（轻量JS+CSS，兼容Bootstrap 5.2.3）

这个方案代码简洁，不会干扰Bootstrap的默认样式，同时满足无障碍要求：

HTML

<!-- 使用Bootstrap默认按钮类，仅添加ID用于事件绑定 -->
<button class="btn btn-primary" id="action-btn">操作按钮</button>

CSS

/* 自定义取消状态样式，ID选择器优先级高于Bootstrap类选择器 */
#action-btn.is-canceled {
  background-color: red !important;
}

/* 可选：保持按钮按下时的默认蓝色，覆盖Bootstrap的:active样式 */
#action-btn:active {
  background-color: var(--bs-primary) !important;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('action-btn');
  let isPressed = false;

  // 记录按钮被按下的状态
  btn.addEventListener('mousedown', () => {
    isPressed = true;
    btn.classList.remove('is-canceled');
  });

  // 按钮内释放鼠标，重置状态
  btn.addEventListener('mouseup', () => {
    isPressed = false;
  });

  // 鼠标移出按钮时，若仍处于按下状态，监听全局释放事件
  btn.addEventListener('mouseleave', () => {
    if (!isPressed) return;
    
    const onGlobalMouseUp = () => {
      btn.classList.add('is-canceled');
      isPressed = false;
      document.removeEventListener('mouseup', onGlobalMouseUp);
    };
    document.addEventListener('mouseup', onGlobalMouseUp);
  });

  // 无障碍支持：ESC键触发取消状态
  btn.addEventListener('keydown', e => {
    if (e.key === 'Escape') btn.classList.add('is-canceled');
  });
});