JavaScript onclick() 事件冒泡 - 工作与否？

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?

Answer 2

There's 3 primary ways to handle JavaScript events:

1. Event Handlers
2. Event Listeners
3. Event Delegation

Event handlers are things like onclick that are put directly into the HTML. Event listeners use a method called addEventListener to attach listners to an element and has the browser listen for events. Event delegation (involves bubbling), per your question, and allows us to listen on parent elements to events that happen on their children.

You're basically trying to blend #1 and #3 here. You could use any of the three but you might actually have an easier time with #2:

Try something like this:

rows = document.getElementsByTagName("tr");
rows.('click', function(event) {
 window.location = '//edit.html?requestId=3339'; 
};

This post on JavaScript Events will cover more on this if you're needing to understand the 3 ways better. (Disclaimer: I wrote it).