anchor tag inside a clickable container doesn't work in Chrome

Question

I want an entire table row to be clickable, so I'm using this:

<tr onclick="location='my_link.html'">
    <td>Clickable Row</td>
    <td>Clickable Row</td>
    <td>Clickable Row</td>
</tr>

I also want a small icon inside the row to be clickable with a separate action, so I'm using this:

<tr onclick="my_link.html">
    <td>Clickable Row</td>
    <td>Clickable Row</td>
    <td>
        <a href="JavaScript:my_function();"><img src="icon.png" /></a>
        Clickable Row
    </td>
</tr>

This is working as expected in Safari, but in Chrome, clicking the button activates the onclick for the row, so there's no way to access my_function.

I tried...

• Giving the icon a higher z-index: no effect
• Calling my_function from an onclick on the icon image instead of an <a> tag: no effect
• Wrapping the <tr> tag in an <a> tag instead of using an onclick: then the row was no longer clickable

Do you have another idea about how to make this work?

Answer 1

Use an onclick attribute that calls event.stopPropagation() .

 function click_row() { console.log("Row clicked"); } function click_a(e) { e.stopPropagation(); console.log("Anchor clicked"); } 

 <table> <tr onclick="click_row()"> <td>Column 1</td> <td><a href="#" onclick="click_a(event)">Click</a></td> </tr> </table>