用<div>模拟<button>时，如何让空格键触发:active伪类？

一、解决<div>模拟按钮时空格键无法触发:active的问题 #

浏览器仅会对原生交互（如鼠标点击、原生按钮的键盘触发）自动激活:active伪类，对于自定义的<div>按钮，需要手动模拟这一状态：

1. CSS层面同步样式
   新增自定义类（如is-active），将其与:active伪类绑定相同样式，确保两种触发方式的视觉表现一致：

   .custom-button:active,
   .custom-button.is-active {
       background-color: #e0e0e0;
       /* 你的:active样式 */
   }
   

2. JavaScript控制状态切换
   通过键盘事件监听，在空格键/回车键按下时添加激活类，松开或失去焦点时移除：

   <div role="button" tabindex="0" class="custom-button">foo</div>
   

   const btn = document.querySelector('.custom-button');
   
   btn.addEventListener('keydown', (e) => {
       if (e.key === ' ' || e.key === 'Enter') {
           e.preventDefault(); // 阻止空格默认滚动行为
           btn.classList.add('is-active');
           btn.click(); // 触发预设的点击逻辑
       }
   });
   
   btn.addEventListener('keyup', () => {
       btn.classList.remove('is-active');
   });
   
   btn.addEventListener('blur', () => {
       btn.classList.remove('is-active');
   });
   

二、实现类似WinUI3 Expander的嵌套交互 #

由于HTML规范禁止<button>嵌套，采用「外层<div>模拟容器按钮 + 内层原生<button>」的方案，确保交互隔离与合法性：

1. 结构设计
   外层容器添加role="button"和tabindex="0"保证可访问性，内层使用原生按钮：

   <div role="button" tabindex="0" class="expander-container">
       展开/收起容器
       <button class="inner-action-btn">内部操作按钮</button>
   </div>
   

2. 交互逻辑

   • 外层容器仅在自身聚焦时响应空格键/回车键，触发展开/收起逻辑
   • 内层原生按钮自动捕获自身聚焦时的键盘事件，不会干扰外层容器

   .expander-container {
       padding: 8px 12px;
       border: 1px solid #ddd;
       display: inline-flex;
       gap: 10px;
       cursor: pointer;
   }
   
   .expander-container:active,
   .expander-container.is-active {
       background-color: #f5f5f5;
   }
   

   const expander = document.querySelector('.expander-container');
   const innerBtn = document.querySelector('.inner-action-btn');
   
   // 外层容器逻辑
   expander.addEventListener('keydown', (e) => {
       if (e.key === ' ' || e.key === 'Enter') {
           e.preventDefault();
           expander.classList.add('is-active');
           // 这里写入展开/收起的具体逻辑
           console.log('容器状态切换');
       }
   });
   
   expander.addEventListener('keyup', () => expander.classList.remove('is-active'));
   expander.addEventListener('blur', () => expander.classList.remove('is-active'));
   
   // 内层按钮逻辑
   innerBtn.addEventListener('click', () => {
       console.log('内部按钮触发');
   });
   

3. 可访问性说明

   • 保留role="button"确保屏幕阅读器识别为按钮组件
   • 同时支持空格键和回车键触发，符合WAI-ARIA交互规范

内容的提问来源于stack exchange，提问作者Cmo Sekil