如何根据屏幕宽度禁用 onMouseEnter/onMouseLeave 事件？

Question

我将 React 与样式化组件一起使用，所以假设我有一个像这样的 div：

export const Container = styled.div`
  display: flex;
  flex-direction: column;
`

return (
  <Container
    onMouseEnter{() => alert("foo")}
    onMouseLeave{() => alert("bar")}
  >
    Content
  </Container>
)

当设备屏幕宽度小于 700 像素时，如何禁用这些警报（onMouseEnter/onMouseLeave 事件）？

Answer 1

您可以使用 Window.matchMedia()

if ( window.matchMedia('(max-width: 700px)').matches ) {
   // your function executed below 700px window width
}

How do I disable onMouseEnter/onMouseLeave events based on screen width?