javascript - 如何捕获任何 HTML 元素上的 onKeyUp 事件？

Question

我正在尝试听 keyup事件 <section></section> React 中的 HTML 元素。到目前为止，我还无法让它发挥作用。您将在下面找到处理该事件的代码示例:

import React from "react"

function scrollTo(event) {
  // event.preventDefault()
  console.log(event.type)
}

const FullscreenBackground = () => (
  <section
    onWheel={scrollTo}
    onKeyUp={scrollTo}
  >
    // Content
  </section>
)

export default FullscreenBackground

我正在毫无问题地收听 onWheel事件，但我对 onKeyUp 没有任何运气一个。

Answer 1

默认情况下，div 元素无法获得焦点。您可以通过将 tabIndex="0" 属性添加到 section 元素来使此 div“可选择”。

function scrollTo(event) {
  // event.preventDefault()
  console.log(event.type)
}

const FullscreenBackground = () => (
  <section
    onWheel={scrollTo}
    onKeyUp={scrollTo}
    tabIndex="0"
  >
    qweqweqweqweqwe
  </section>
)


ReactDOM.render(<FullscreenBackground />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>