javascript - How to detect when mouse stops moving in React? - Stack Overflow

admin管理员组

文章数量:1318991

I'm trying to dynamically toggle the visibility of a button element based on mouse movement (i.e., {visibility: visible} when the mouse is moving, {visibility: hidden} when it stops moving). The button is showing with onMouseMove, but I'm struggling with where to start on the second part. Since React doesn't have an onMouseStop event, what's the best way to achieve this?

export default class Infographic extends Component {
  constructor(props){
    super(props);

    this.state = {
      mouseMoving: false,
    };

    this.setMouseMove = this.setMouseMove.bind(this);
  }

  setMouseMove(e) {
    e.preventDefault();
    this.setState({mouseMoving: true});
  }

  render() {

    const scrollButtonStyle = {
      visibility: this.state.mouseMoving ? 'visible': 'hidden', 
     };

     return (
       <div onMouseMove={e => this.setMouseMove(e)}>
         <button style={scrollButtonStyle}>Back to top</button>
         <h1>Lorem Ipsum</h1>
       </div>  
     );
  }
}

UPDATE

Per the suggestions below, I added the following IIFE block to the setMouseMove method (using arrow functions for scope access) and it works just as expected. Thanks for the help!

setMouseMove(e) {
  e.preventDefault();
  this.setState({mouseMoving: true});

  let timeout;
  (() => {
    clearTimeout(timeout);
    timeout = setTimeout(() => this.setState({mouseMoving:false}), 50);
  })();
}

I'm trying to dynamically toggle the visibility of a button element based on mouse movement (i.e., {visibility: visible} when the mouse is moving, {visibility: hidden} when it stops moving). The button is showing with onMouseMove, but I'm struggling with where to start on the second part. Since React doesn't have an onMouseStop event, what's the best way to achieve this?

export default class Infographic extends Component {
  constructor(props){
    super(props);

    this.state = {
      mouseMoving: false,
    };

    this.setMouseMove = this.setMouseMove.bind(this);
  }

  setMouseMove(e) {
    e.preventDefault();
    this.setState({mouseMoving: true});
  }

  render() {

    const scrollButtonStyle = {
      visibility: this.state.mouseMoving ? 'visible': 'hidden', 
     };

     return (
       <div onMouseMove={e => this.setMouseMove(e)}>
         <button style={scrollButtonStyle}>Back to top</button>
         <h1>Lorem Ipsum</h1>
       </div>  
     );
  }
}

UPDATE

Per the suggestions below, I added the following IIFE block to the setMouseMove method (using arrow functions for scope access) and it works just as expected. Thanks for the help!

setMouseMove(e) {
  e.preventDefault();
  this.setState({mouseMoving: true});

  let timeout;
  (() => {
    clearTimeout(timeout);
    timeout = setTimeout(() => this.setState({mouseMoving:false}), 50);
  })();
}

• javascript
• reactjs
• mouseevent

Share Improve this question Follow edited Dec 20, 2018 at 4:30 Ben Hurst asked Dec 19, 2018 at 22:27 Ben HurstBen Hurst 4111 silver badge44 bronze badges 1

• You'll have to set up a timer that sets mouseMoving to false when no mousemove events have been received for some amount of time. – Herohtar Commented Dec 19, 2018 at 22:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Have a timeout function that sets how many milliseconds of inactivity counts as "not moving".

let timeout;
let whenMouseMoves = () => {
  clearTimeout(timeout);
  timeout = setTimeout(toggleButton(), 50);
}

And adjust the function as you see fit for your button. Obviously, you'll need to make the toggleButton() function if you use this code.

Thank you. Your code helped me implement a feature in my portfolio which hides the menus after some seconds without mouse movement.

However, I came across a bug: when moving the mouse continuously, the menu was starting to blink or disappearing before the set timeout (which was 2.5 seconds).

To anyone who uses this approach and are encountering the same bug I'm about to describe, I was able to solve it (sort of).

The issue is that every time you move the mouse, the setMouseMove() will trigger, and the clearTimeout() will not clear the setTimeout() that was triggered the last time the mouse moved. This is because setMouseMove() is again declaring the timeout variable, which will be now empty, and then when the code gets to clearTimeout(), the timeout = setTimeout() was not yet triggered.

To solve this issue, I created a variable called enableMoving, used a setInterval() of 2500s (to match my setTimeout() interval) to set enableMoving to true, and on setMouseMove() -> setTimeout() I put a condition to check and stop the function if enableMoving is false, otherwise the code runs and set enableMoving to false.

That way, setTimeout() will only trigger if enableMoving is true (which will be every 2.5 seconds).

This is the code for better understanding:

export default class Home extends React.Component {
  constructor(props){
    super(props)

    this.state = {
      mouseMoving: false,
    }

    this.state = {
      enableMove: true,
    }

    this.setMouseMove = this.setMouseMove.bind(this)
  }

  ponentDidMount() {
    setInterval(() => {
      this.setState({enableMove: true})
    }, 2500)
  }
    
  setMouseMove(e){
    e.preventDefault()
    this.setState({mouseMoving: true})

    const time = 2500
    let timeout
    (() => {
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        if (this.state.enableMove === false) return 0
        this.setState({mouseMoving: false})
        this.setState({enableMove: false})
      }, time)   
    })();
  }

  render() {

    const isVisible = {
      opacity: this.state.mouseMoving ? 1 : 0,
    }

  return ( [...rest of the code...] )

  }
}

I said this "sort of" solved the problem, because sometimes the two timers (setInterval() and setTimeout()) does not sync together and the menu will disappear slightly before 2.5 seconds, but is much more precise and stable than before.

Perhaps if you play with both timers a little bit you will get to a better result.

本文标签： javascriptHow to detect when mouse stops moving in ReactStack Overflow