title: Button element not firing click event when clicking on button text and releasing off it (but still inside the button)?
body: <p>On WebKit browsers (I tested on Chrome and Safari on Mac), button element behaves weird:</p>
  
  <p>Wen in this fiddle <a href="http://jsfiddle.net/5ReUn/3/" rel="noreferrer">http://jsfiddle.net/5ReUn/3/</a> you do the following:</p>
  
  <ol>
  <li>Press left mouse button while the cursor is over HTML button text</li>
  <li>Move the cursor (while pressed) to an area of the button without text</li>
  <li>Release the mouse button</li>
  </ol>
  
  <p>Then the click event on the button element is not fired!</p>
  
  <p>HTML is very simple:</p>
  
  <pre><code>&lt;button id="button"&gt;Click&lt;/button&gt;
  </code></pre>
  
  <p>And the CSS is not sophisticated at all:</p>
  
  <pre><code>button {
      display: block;
      padding: 20px;
  }
  </code></pre>
  
  <p>JS for click catching:</p>
  
  <pre><code>button = document.getElementById('button');
  button.addEventListener('click', function() {
      console.log('click');
  });
  </code></pre>
  
  <p>Many visitors to my site complain that buttons are not clickable. They don't realize they are moving the cursor while clicking.</p>
  
  <p>Has anybody found a workaround for this?</p>