title: React state based on mouse/keyboard press/release
body: <p>i'm creating a custom button with React.</p>
  <p>The appearance based on the press/release of the mouse/keyboard.
  Sometimes it cannot be done by css using <code>:active</code> pseudo, so i need the javascript solution.</p>
  <p>So i created a state that listen the <code>onMouseDown/Up</code> &amp; <code>onKeyDown/Up</code>.</p>
  <p>The problem is, if the user <strong>click the button</strong> then <strong>drag the mouse out of the button</strong> then <strong>release the mouse</strong>,<br />
  i miss the <strong>onMouseUp</strong> event thus causing the activeState locked up forever.</p>
  <p>Do you have a solution for the equivalent of the <code>:active</code> &amp; <code>:not(:active)</code> pair in javascript way?</p>
  <p>note:
  watching event <code>window.addEventListener('mouseup',...)</code> is still not satisfying me. When the mouse click hold &amp; move out from the browser's window, i still missing the mouseup event.</p>