title: Stop propagation of hover on document on mouse move event
body: <p>I need to stop propagation of events, aborting the <code>hover</code>behaviour on the whole document. I´ve made a simple <code>Test</code> component that calls a <code>mousemove</code> handler in the whole document:</p>
  
  <pre><code>import React, { Component } from "react";
  
  import "./Test.css";
  
  class Test extends Component {
  
      state = {
          posX: 0,
          posY: 0
      }
  
      componentWillMount = () =&gt; {
          document.addEventListener("mousemove", this.handleMouseMove, false);
      };
  
      componentWillUnmount = () =&gt; {
          document.removeEventListener("mousemove", this.handleMouseMove, false);
      };
  
      handleMouseMove = event =&gt; {
  
          this.setState ({
              posX: event.pageX,
              posY: event.pageY
          })
  
          event.preventDefault();
          event.stopPropagation();
      };
  
      render = () =&gt; {
          return (
              &lt;div className="container"&gt;
                  &lt;div className="content"&gt;
                      &lt;h1&gt;Pos X: {this.state.posX}&lt;/h1&gt;
                      &lt;h1&gt;Pos Y: {this.state.posY}&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      };
  }
  
  export default Test;
  </code></pre>
  
  <p>My <code>Test.css</code>:</p>
  
  <pre><code>.container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
  }
  
  .content {
      width: 100%;
      text-align: right;
  }
  
  .content:hover {
      background-color: green;
  }
  </code></pre>
  
  <p>The example code above is running <a href="https://codesandbox.io/s/81wj81r4q8" rel="nofollow noreferrer">at here</a> - check the <code>Test.js</code> component.</p>
  
  <p>I expected that code not to hover, as I´m calling <code>stopPropagation/preventDefault</code> on the mousemove event handler, but the hovering effect (green painting) still occurs. </p>
  
  <p>How can I disable that hovering effect ? Can that be done by javascript functions ?</p>