title: Button inside table row tr, when clicking button only do button action
body: <p>I'm trying to have a button inside a row.</p>
  
  <p>when clicking the button I want it to do A.</p>
  
  <p>and when clicking the row I want it to do B.</p>
  
  <p>I tried to stop propagation, and at one point it was working, but I don't know what I didn't and I can't manage to make it work again.</p>
  
  <p>Probably there is a better way to do this.</p>
  
  <p>I have a fiddle <a href="http://jsfiddle.net/sebababi/YJ6eG/" rel="nofollow">http://jsfiddle.net/sebababi/YJ6eG/</a></p>
  
  <pre><code>function stopEvent(ev) {
    ev.stopPropagation();
    alert("event propagation halted.");
  }
  function stopPropagation(elem) {
    elem = document.getElementById("row1");
    elem.addEventListener("click", stopEvent, true);
  }
  </code></pre>