onClick events in nested html elements [duplicate]

Question

I have a structure like this:

<tr>
 <td onClick="doSomeStuff();">
  <a href="#" onClick="doOtherStuff(1);">1</a>
  <a href="#" onClick="doOtherStuff(2);">1</a>
 </td>
</tr>

My problem is that doSomeStuff() always executes, no matter that I am clicking on a <a href> element.

How I can fix this?

Answer 1

If you're using plain javascript. Try this

JS

function doOtherStuff(event,arg) {
        event.stopPropagation();
}

---

HTML

<tr>
     <td onClick="doSomeStuff();">
            <a href="#" onClick="doOtherStuff(event,1);">1</a>
            <a href="#" onClick="doOtherStuff(event,2);">1</a>
     </td>
</tr>