使用箭头键防止窗口在导航下拉菜单上滚动答案

【问题标题】：Prevent window scroll on navigating dropdown with arrow keys使用箭头键防止窗口在导航下拉菜单上滚动
【发布时间】：2022-12-23 03:41:04
【问题描述】：

我正在尝试使用 StimulusJS 阻止页面在我的自定义下拉搜索中滚动。很像在 gmail 中，您可以在搜索框中键入内容并使用箭头键进行导航。我转到可以导航下拉菜单的位置，但同时箭头键的默认行为在这里存在问题。

    // results are divs that get focused
    const results = [node1, node2, node3]

    if (this.listCounter <= -1) { this.listCounter = -1 }
    if (this.listCounter >= results.length) { this.listCounter = results.length - 1 }

    switch (event.key) {
      case 'ArrowDown':
        this.listCounter++
        break
      case 'ArrowUp':
        this.listCounter--
        // when we reach the top we focus back on input element
        if (this.listCounter <= 0) {
          this.userInputTarget.focus()
        }
        break
      default:
        break
    }
    if (results[this.listCounter]) {
      results[this.listCounter].focus()
    }

所以这很好用，但问题是向上/向下按箭头键也会调用页面上的滚动。所以我尝试禁用它，但只有在按下键时。我不想禁用整个页面的这种行为，只有当某些元素被聚焦时。下面的console.log() 被解雇，但它不会阻止窗口滚动。

  connect() {
    window.addEventListener('keyup', this.preventKeyboardEvents.bind(this), 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()
      console.log('fired')
    }
  }

我错了哪一部分？ .preventDefault() 是否有可能只针对某些事件？

【问题讨论】：

标签： javascript stimulusjs

【解决方案1】：

结果很简单。

window.addEventListener('keydown', this.preventKeyboardEvents.bind(this), false)

因为当按下一个键 keydown 事件首先被触发时，我假设它触发了在浏览器窗口中滚动的默认行为。所以这里使用keyup 是个问题，因为它是在窗口收到来自keydown 的事件后触发的。

【讨论】：