title: Prevent <button> being clicked without disabling it
body: <p>On my page i have a <code>&lt;button&gt;</code> with an <code>&lt;input type="number" /&gt;</code> inside, when a user clicks in the <code>&lt;input&gt;</code> or it's spinner buttons the <code>&lt;button&gt;</code>'s click event will fire and the <code>&lt;button&gt;</code> obtains the <code>:active</code> style.
  Setting <code>&lt;button disabled="disabled"&gt;</code> does prevent click event from firing but the <code>&lt;button&gt;</code> obtains the disabled style.</p>
  
  <p>What i am looking for is how to make the <code>&lt;button&gt;</code> unclickable using simple Javascript, CSS, or HTML without hijacking click events, disabling it, or putting something transparent on top.
  It should appear normal but when clicked it must not change style or fire a click event.</p>
  
  <p>What i have <a href="http://jsfiddle.net/tzu8gLvm/" rel="nofollow noreferrer">http://jsfiddle.net/tzu8gLvm/</a></p>