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>
