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

I'm using React with styled-components, so let's say I have a div like this:

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

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

How do I disable these alerts (onMouseEnter/onMouseLeave events) when the device screen width is less than 700px?

CodePudding user response：

You can use Window.matchMedia()

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