空格键无法勾选复选框，按下后页面反而向下滚动

问题出在焦点位于 <li> 元素而非复选框上，按下空格键时浏览器会执行聚焦非交互元素的默认行为（页面滚动），且全局监听可能因事件传播顺序或范围问题未能完全阻止该行为。以下是修复步骤：

1. 优化 HTML 结构（增强可访问性） #

给 <li> 添加角色属性，让屏幕阅读器识别其为复选框，并同步状态：

<li class="filter-item" tabindex="0" role="checkbox" aria-checked="false">
  <label data-filter-item="" class="filter-item__content " for="filter--filter.p.product_type--Blouse--top-bar">
    <input type="checkbox" name="filter.p.product_type" value="Blouse" class="filter-item__checkbox visually-hidden" data-filter-item-input="" data-filter="filter.p.product_type=Blouse" data-value-escaped="Blouse" id="filter--filter.p.product_type--Blouse--top-bar">

    <div class="filter-item__content-inner">
      <div class="filter-input__input">
        <span class="icon icon-new icon-checkmark ">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="m1.88 11.988 6.21 6.103L22.467 3.83" stroke="currentColor" stroke-width="3.055"></path>
          </svg>
        </span>
      </div>
      <span class="filter-item__label">Blouse</span>
      <span class="filter-item__count fs-body-75">(19)</span>
    </div>
  </label>
</li>

2. 绑定针对性的键盘事件监听 #

直接给每个 .filter-item 绑定按键事件，精准处理空格键和回车键的行为：

const filterItems = document.querySelectorAll('.filter-item');

filterItems.forEach(item => {
  // 初始化 aria-checked 状态与复选框同步
  const checkbox = item.querySelector('.filter-item__checkbox');
  if (checkbox) {
    item.setAttribute('aria-checked', checkbox.checked.toString());
  }

  // 处理键盘事件
  item.addEventListener('keydown', function(e) {
    if (e.key === ' ' || e.key === 'Enter') {
      e.preventDefault(); // 阻止默认滚动或跳转行为
      const checkbox = this.querySelector('.filter-item__checkbox');
      if (checkbox) {
        checkbox.checked = !checkbox.checked; // 切换复选框状态
        this.setAttribute('aria-checked', checkbox.checked.toString()); // 更新可访问性属性
        checkbox.dispatchEvent(new Event('change')); // 触发 change 事件，确保原有过滤逻辑生效
      }
    }
  });

  // 同步点击复选框时的 aria-checked 状态
  checkbox.addEventListener('change', function() {
    item.setAttribute('aria-checked', this.checked.toString());
  });
});

为什么原代码无效？ #

• 全局监听范围过大，可能因事件传播优先级问题，无法及时阻止聚焦 <li> 时的默认滚动行为。
• 原代码仅阻止了默认行为，但未实现复选框的切换逻辑。

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