Question

I have a table with data such as this:

<table>
 <tr onclick="window.location='download.php?id=1'">
  <td>Program 1<br/>Short Description 1 (<a onclick="$.popup.show('Install Instructions', 'Instructions pulled from DB here')">Instructions</a>)</td>
  <td>Added by user and date/time here<td>
  <td>Filesize here<td>
  <td><a href="edit.php?id=1">Edit</a> - <a href="delete.php?id=1">Delete</a><td>
 </tr>
 (repeat TRs for more programs pulled from DB)
</table>

The problem I’m having is that when you click the (Instructions) link, it should popup a window with the instructions. It does do it, but it also fires the TR’s onclick. So I get the popup for a split second then it goes to download.php.

Is there someway I can prevent it from firing the TR’s onclick? Preferably using jquery, but I don’t mind a plain javascript solutions either.

Answer 1

Basically, you need to stop propagation of events, using event.cancelBubble (for IE) or event.stopPropagation() (for everyone else). The solution given from quirksmode (which I’ve used before) is to do something like this:

<script type="text/javascript">
var instructions = function(e) {
    // Get the correct event in a cross-browser manner, then stop bubbling/propagation.
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

    // Do what you want now
    $.popup.show('Install Instructions', 'Instructions pulled from DB here');
}
</script>

Then your script would call it:

<td>Program 1<br/>Short Description 1 (<a onclick="instructions(event)">Instructions</a>)</td>

(Of course, you could put this all inline, but that’s a bloody mess.)

You may also find this question illuminating.