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

Posted 2023-03-06

【中文标题】如何根据屏幕宽度禁用 onMouseEnter/onMouseLeave 事件？

【英文标题】：How do I disable onMouseEnter/onMouseLeave events based on screen width?

【发布时间】：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 事件）？

【参考方案1】：

你可以使用 Window.matchMedia()

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

【讨论】：

它有效。谢谢！