Javascript 选择不带TR的表TD

我有这样一个html表：

 <table>
   <tr onClick="someFunc();">
     <td>Foo</td>
     <td><button onClick="anotherFunc();">Bar</button></td>
   </tr>
 </table>

---

问题是当我点击tr时工作正常，但当我按下TD内的按钮时，它会启动两个功能，因此我希望当我点击按钮时，只启动按钮功能。

您的

点击操作正在传播到
按钮的所有父元素。要停止此操作，请在
单击事件中使用
event.cancelBubble=true
（或者，如果使用jQuery，可以使用
event.stopPropagation（）
）。
您的
单击操作将传播到
按钮的所有父元素。要停止此操作，请在
单击事件中使用
event.cancelBubble=true
（或者，如果您使用jQuery，可以使用
event.stopPropagation（）
）。
首先，不要将内联处理程序与jQuery一起使用。这将处理程序从注册中分离出来，没有任何好的理由，并导致维护问题。使用类或ID来匹配元素，并使用jQuery处理程序

问题是事件传播。要停止单击传播，请在处理程序中使用
e.stopPropagation（）
：

<table>
   <tr class="doSomeFunc">
     <td>Foo</td>
     <td><button class="doAnotherFunc">Bar</button></td>
   </tr>
 </table>

$('.doSomeFunc').click(function(e){
  alert("Foo");
});

$('.doAnotherFunc').click(function(e){
   e.stopPropagation();
   alert("Bar");
});


福
酒吧
$（'.doSomeFunc'）。单击（函数（e）{
警惕（“Foo”）；
});
$（'.doAnotherFunc'）。单击（函数（e）{
e、 停止传播（）；
警报（“酒吧”）；
});

如果要坚持使用现有的非jQuery代码，只需更改以下内容：

<button onClick="anotherFunc();return false;">



来自鼠标处理程序的
返回false
与
e.stopPropagation（）
和
e.preventDefault（）
对于初学者，不要将内联处理程序与jQuery一起使用。这将处理程序从注册中分离出来，没有任何好的理由，并导致维护问题。使用类或ID来匹配元素，并使用jQuery处理程序

问题是事件传播。要停止单击传播，请在处理程序中使用
e.stopPropagation（）
：

<table>
   <tr class="doSomeFunc">
     <td>Foo</td>
     <td><button class="doAnotherFunc">Bar</button></td>
   </tr>
 </table>

$('.doSomeFunc').click(function(e){
  alert("Foo");
});

$('.doAnotherFunc').click(function(e){
   e.stopPropagation();
   alert("Bar");
});


福
酒吧
$（'.doSomeFunc'）。单击（函数（e）{
警惕（“Foo”）；
});
$（'.doAnotherFunc'）。单击（函数（e）{
e、 停止传播（）；
警报（“酒吧”）；
});

如果要坚持使用现有的非jQuery代码，只需更改以下内容：

<button onClick="anotherFunc();return false;">



从鼠标处理程序返回false
将执行与
e.stopPropagation（）
和
e.preventDefault（）
相同的操作，您需要使用
e.stopPropagation（）

防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知

下面是一个演示：

$（“tr”）。单击（函数（e）{
警惕（“Foo”）；
})
$（“按钮”）。单击（功能（e）{
e、 停止传播（）；
警报（“酒吧”）；
});
福
酒吧
您需要使用
e.stopPropagation（）

防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知

下面是一个演示：

$（“tr”）。单击（函数（e）{
警惕（“Foo”）；
})
$（“按钮”）。单击（功能（e）{
e、 停止传播（）；
警报（“酒吧”）；
});
福
酒吧
OP已经标记了jQuery，但是他/她的示例没有jQuery。@Michael Giovanni Pumo：我注意到了，因此第二个“hack”解决方案：）第二个hack对me@MichaelGiovanni Pumo：当有人将
Javascript
这样的问题也标记为
jQuery
时，我倾向于认为他们“可能”想要一个jQuery替代方案，因为这是一个常见的请求。不过，我看到您现在已经从问题中删除了该标记。@TrueBlueAussie-因为问题已经回答，并且没有使用jQuery，我觉得为未来的用户删除jQuery标记是合适的。OP已经标记了jQuery，但他/她的示例没有jQuery。@Michael Giovanni Pumo：我注意到了，因此出现了第二个“黑客”解决方案：）第二次破解对me@MichaelGiovanni Pumo：当有人将
Javascript
这样的问题也标记为
jQuery
时，我倾向于认为他们“可能”想要一个jQuery替代方案，因为这是一个常见的请求。我看到您现在已经从问题中删除了该标记。@TrueBlueAussie-由于问题已经得到回答，并且没有使用jQuery，我觉得为将来的用户删除jQuery标记是合适的。