I have the following JavaScript:
<div>
<tr onClick="click1()">
<td>
click 1
</td>
<td onClick="click2()">
click 2
</td>
</tr>
</div>
function click1() {
alert(1);
}
function click2() {
alert(2);
}<table border="1">
<tr onClick="click1()">
<td>
click 1
</td>
<td onClick="click2()">
click 2
</td>
</tr>
</table>If I click 'click 1', the click1() function is called as expected. If I click 'click 2', the click1() & click2() functions are both called.
Question
How do I make the click on 'click 2' only call the click2() function, and not call the click1() function?
Well, the easiest way is just to move your 'click 1' trigger to the button itself:
<div>
<tr>
<td onClick="click1()">
click 1
</td>
<td onClick="click2();">
click 2
</td>
</tr>
</div>
However, I'm assuming you want to keep the click 1 trigger where it is, in which case you can add event.stopPropagation() to the event:
<div>
<tr onClick="click1();">
<td>
click 1
</td>
<td onClick="click2(); event.stopPropagation();">
click 2
</td>
</tr>
</div>