title: How to prevent event propagation on a <button /> element?
body: <p>I have a <code>button</code> element with a <code>span</code> tag inside:</p>
  
  <pre><code>&lt;button onClick={this.doSomething.bind(this)}&gt;
     &lt;span&gt;Some text&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>The <code>doSomething</code> function is as follows:</p>
  
  <pre><code>function doSomething(e){
      e.stopPropagation();
      e.preventDefault();
      if(e.target.classList.contains("disabled")){
          return false;
      }
  
      // Continue with button action...
  }
  </code></pre>
  
  <p>When the button has the <code>disabled</code> class I do not want the button to fire. Currently, when the rim of the button is clicked it does not fire. However, when the inner part of the button is clicked (where the text is) it fires - I want to avoid this - how do i do this?</p>