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

【问题标题】：How do I disable onMouseEnter/onMouseLeave events based on screen width?如何根据屏幕宽度禁用 onMouseEnter/onMouseLeave 事件？
【发布时间】：2021-11-17 17:30:19
【问题描述】：

我正在使用带有样式组件的 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 事件）？

【问题讨论】：

标签： javascript css reactjs media-queries styled-components

【解决方案1】：

你可以使用 Window.matchMedia()

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

【讨论】：

它有效。谢谢！