using onClick in a table row that also has links in it

Question

I'm using onClick in table rows as follows:

<tr onmouseover="this.style.cursor='pointer'" onclick="http://www.whatever.com/index.php?var={$foo1}">

I also have some needs to put a link in certain areas in this table row, i.e.

<td>Stuff Here</td>
<td>Stuff Here</td>
<td>Stuff Here</td>
<td><a href="specialLink.php?var={$foo2}">Here</a></td>
<td>Stuff Here</td>

The problem is, the "inner link" (specialLink.php) can't be clicked, because the row link takes precedence. Do I have any options here?

Thanks

Answer 1

You can use stopImmediatePropagation() to bypass consecutive/incoming events.

Short example:

<tr onclick="alert('tr event')">
    <td>tr event</td>
    <td onclick="alert('td');event.stopImmediatePropagation();">NO tr event</td>
</tr>

Test this on jsfiddle: http://jsfiddle.net/g8Anh/6/

Answer 2

I 'll do that :

<script type="text/javascript">
var link=true;
</script>

<tr onmouseover="this.style.cursor='pointer'" onclick="if (link) window.location ='http://www.whatever.com'">

<td>Stuff Here</td>
<td>Stuff Here</td>
<td>Stuff Here</td>
<td onmouseover="link=false;" onmouseout="link=true;"><a href="specialLink.php">Here</a></td>
<td>Stuff Here</td>