title: How come onclick event gets fired by child nodes of button tag in google chrome?
body: <p>The situation:</p>
  <ol>
  <li>Create button object with document.createElement</li>
  <li>Directly assign onclick event, e.g: button.onclick = showResult;</li>
  <li>Modify button innerHtml/append img node (I've tried both), to put inside it a magnifying glass png icon.</li>
  <li>Define showResult function, which receives evt parameter, then try to get the target tagName attribute, but when you click over the icon, it returns 'IMG' instead 'BUTTON'</li>
  </ol>
  <p>Here's the snippet:</p>
  <pre><code>td = document.createElement( 'td' );
  btn = document.createElement( 'button' );
  btn.type = &quot;button&quot;;
  btn.onclick = showResults;
  btn.innerHTML = '&lt;img src=&quot;../img/mag.png&quot; /&gt;';
  td.appendChild( btn );
  </code></pre>
  <p>And the function</p>
  <pre><code>function showResults( evt ) {
      console.log( evt.target.src );
  }
  </code></pre>
  <p>I fixed this using this conditional:</p>
  <pre><code>var btn = evt.target == 'BUTTON' ? evt.target : evt.target.parentNode;
  </code></pre>
  <p>But I really do not like it, is there a workaround or something about this behavior, that you can point my eyes to?.</p>