Question

I have a table in which the table row tag is decorated with an onclick() 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.

The desired behavior is that if they click on the link, "delete.html" is loaded. If they click anywhere else in the row, "edit.html" is loaded.

The problem is that sometimes (according to users) both the link and the onclick() are fired at once, leading to a problem in the back end code. They swear they are not double-clicking.

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:

<tr id="tableRow_3339_0" class="odd">
   <td class="l"></td>
   <td>PENDING</td>
   <td>Yabba Dabba Doo</td>
   <td>Fred Flintstone</td>
   <td>
     <a href="/delete.html?requestId=3339">
       <div class="deleteButtonIcon"></div>
     </a>
  </td>
  <td class="r"></td>
</tr>
<script type="text/javascript">document.getElementById("tableRow_3339_0").onclick = function(event) { window.location = '//edit.html?requestId=3339'; };</script>

Answer 1

Event bubbling work like this. If an element A is contained within element B, and element A is clicked, the click event fires for element A and then it will bubble up and fire for element B. This occurs because technically you are clicking both elements.

So basically if they click the link, the click event bubbles up to the tr element. Depending on how fast your next page loads from the link click, the tr click event may occur.

You can stop bubbling within an event handler: How to stop event propagation with inline onclick attribute?