JavaScript onclick() event bubbling - working or not? - Stack Overflow

admin管理员组

文章数量:1355648

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 weled:

<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>

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 weled:

<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>

• javascript
• dom-events
• event-bubbling

Share Improve this question Follow edited Feb 6, 2022 at 9:04 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Nov 27, 2012 at 22:57 user1071914user1071914 3,4031111 gold badges5454 silver badges8080 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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?

本文标签： JavaScript onclick() event bubblingworking or notStack Overflow