I have the following HTML-table:

&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;
      Row 1
    &lt;/td&gt;
    &lt;td&gt;
      &lt;!-- Hidden JSF-button --&gt;
      &lt;button class="hide" /&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;


When I click on a tr, I trigger a click on the hidden button with JS:

$('table tr').on('click', function(e) {
  var $button = $(this).find('button');  
  console.log('trigger click on', $button);

  $button.trigger('click');
});


The click event propagates up, and will cause a never ending loop (can be seen here: http://codepen.io/anon/pen/kDxHy) 

After some searching on SO, it is clear that the solution is to call event.stopPropagation,
like this (can be seen here: http://codepen.io/anon/pen/BnlfA):

$('table tr').on('click', function(e) {
  var $button = $(this).find('button');

  // Prevent the event from bubbling up the DOM tree.
  $button
    .off('click')
    .on('click', function(e) {
      console.log('click');
      e.stopPropagation();

    return true;
  });

  console.log('trigger click on', $button);

  $button.trigger('click');
});


The solution above works. But it feels like a hack, and I don't like it. 

Do I have to register a click handler on the on the $button just to call event.stopPropagation? Are there any better way(s) of preventing the click event from bubbeling? 


Question: Margin and Padding of <Body> Tag
Answer: Browsers have built-in "sane defaults" for the CSS of most HTML elements - this just prevents your page looking completely unreadable if you have pure HTML without CSS, but they are of course intended to be overridden by your own CSS.

The default browser styles are typically referred to as a "User Agent Style Sheet" - the following site is a good reference of the various peculiar UA sheets IE has had over the years and also provides ones for other browsers at the bottom:

http://www.iecss.com/

One method a lot of people use to "normalise" the defaults so you have the same starting point in all browsers is a "CSS Reset" - this is just a snippet of CSS that you place before your own CSS that sets all of the UA styles to the same thing. This is a well known one:

http://necolas.github.com/normalize.css/