title: JavaScript onclick() event bubbling - working or not?
body: <p>I have a table in which the table row tag is decorated with an <code>onclick()</code> handler.  If the row is clicked anywhere, it will load another page.  In one of the elements on the row, is an anchor tag which also leads to another page.</p>
  <p>The <strong>desired</strong> behavior is that if they click on the link, &quot;delete.html&quot; is loaded.   If they click anywhere else in the row, &quot;edit.html&quot; is loaded.</p>
  <p>The <strong>problem</strong> is that sometimes (according to users) both the link and the <code>onclick()</code> are fired at once, leading to a problem in the back end code.  They swear they are not double-clicking.</p>
  <p>I don't know enough about JavaScript event bubbling, handling and whatever to even know where to start with this bizarre problem, so I'm asking for help.   Here's a fragment of the rendered page, showing the row with the embedded link and associated script tag.  Any suggestions are welcomed:</p>
  <pre><code>&lt;tr id=&quot;tableRow_3339_0&quot; class=&quot;odd&quot;&gt;
     &lt;td class=&quot;l&quot;&gt;&lt;/td&gt;
     &lt;td&gt;PENDING&lt;/td&gt;
     &lt;td&gt;Yabba Dabba Doo&lt;/td&gt;
     &lt;td&gt;Fred Flintstone&lt;/td&gt;
     &lt;td&gt;
       &lt;a href=&quot;/delete.html?requestId=3339&quot;&gt;
         &lt;div class=&quot;deleteButtonIcon&quot;&gt;&lt;/div&gt;
       &lt;/a&gt;
    &lt;/td&gt;
    &lt;td class=&quot;r&quot;&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;document.getElementById(&quot;tableRow_3339_0&quot;).onclick = function(event) { window.location = '//edit.html?requestId=3339'; };&lt;/script&gt;
  </code></pre>