Tengo el siguiente 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> Si hago clic en 'clic 1', la función click1() se llama como se esperaba. Si hago clic en 'clic 2', se llaman las click1() y click2() .
Pregunta
¿Cómo hago que el clic en 'clic 2' solo llame a la función click2() y no llame a la función click1() ?
Bueno, la forma más fácil es simplemente mover el gatillo de 'clic 1' al botón en sí:
<div> <tr> <td onClick="click1()"> click 1 </td> <td onClick="click2();"> click 2 </td> </tr> </div> Sin embargo, asumo que desea mantener el activador click 1 donde está, en cuyo caso puede agregar event.stopPropagation() al evento:
<div> <tr onClick="click1();"> <td> click 1 </td> <td onClick="click2(); event.stopPropagation();"> click 2 </td> </tr> </div>