JavaScript onClick嵌入元素

Question

我有以下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>

如果我单击'click 1'，则按预期调用click1()函数。如果我点击"点击2"，click1()&click2()函数都被调用

我如何使点击'点击2'只调用click2()函数，而不调用click1()函数?

Answer 1

最简单的方法就是将'click 1'触发器移动到按钮本身:

<div>
<tr>
<td onClick="click1()">
click 1
</td>
<td onClick="click2();">
click 2
</td>
</tr>
</div>

然而，我假设你想保持click 1触发器在哪里，在这种情况下，你可以添加event.stopPropagation()到事件:

<div>
<tr onClick="click1();">
<td>
click 1
</td>
<td onClick="click2(); event.stopPropagation();">
click 2
</td>
</tr>
</div>