使用箭头键导航下拉菜单时如何阻止页面滚动？

核心错误：事件时机不对 #

页面滚动的默认行为是在keydown事件阶段触发的，你使用keyup事件调用preventDefault()时，默认的滚动行为已经执行完毕，所以完全起不到阻止效果——这就是console.log能触发但页面仍滚动的原因。

解决方案一：在箭头键处理逻辑中直接阻止默认行为 #

在你处理上下箭头导航的代码里，直接在对应case中调用event.preventDefault()，同时确保这段逻辑绑定的是keydown事件（而非keyup，否则导航也会有延迟）：

// 确保这段代码是绑定在keydown事件回调内
const results = [node1, node2, node3]

switch (event.key) {
  case 'ArrowDown':
    event.preventDefault(); // 阻止页面滚动默认行为
    this.listCounter++
    // 修正边界判断：避免计数器越界
    if (this.listCounter >= results.length) {
      this.listCounter = results.length - 1
    }
    results[this.listCounter]?.focus()
    break
  case 'ArrowUp':
    event.preventDefault(); // 阻止页面滚动默认行为
    this.listCounter--
    // 修正边界逻辑：计数器小于0时回到输入框
    if (this.listCounter < 0) {
      this.listCounter = -1
      this.userInputTarget.focus()
    } else {
      results[this.listCounter]?.focus()
    }
    break
  default:
    break
}

解决方案二：修改全局监听的事件类型 #

如果你想保留全局判断的逻辑，只需把监听的事件从keyup改成keydown，就能在默认行为执行前阻止它：

connect() {
  // 绑定keydown事件而非keyup
  this.preventHandler = this.preventKeyboardEvents.bind(this)
  window.addEventListener('keydown', this.preventHandler, false)
}

preventKeyboardEvents(e) {
  const key = e.key
  const results = window.allMultisearchActiveElements
  const activeElement = results.includes(document.activeElement) || document.activeElement === this.userInputTarget
  
  if (activeElement && (key === "ArrowDown" || key === "ArrowUp" || key === "Enter")) {
    e.preventDefault()
  }
}

// 记得在组件销毁时移除监听，避免内存泄漏
disconnect() {
  window.removeEventListener('keydown', this.preventHandler)
}

补充说明 #

当然可以仅针对特定事件调用preventDefault()——只要在正确的事件阶段（keydown）触发判断，就能精准阻止当前场景的页面滚动，不会影响其他页面区域的箭头键正常使用。

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