Question

我有一个像这样的html表：

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

和Javascript：

function somefunc(){
  alert("Foo");
}
function anotherfunc(){
  alert("Bar");
}

问题是当我点击tr工作正常但是当我按下TD内的按钮时它会触发这两个功能，所以当我点击按钮来激活按钮功能时，我想要这样做。

Answer 1

对于初学者，不要对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");
});

如果您想坚持使用现有的非jQuery 代码，只需更改此代码：

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

来自鼠标处理程序的

return false将与e.stopPropagation() 和 e.preventDefault()完全相同。

Answer 2

您的click操作正在传播到button的所有父元素。要停止此操作，请在event.cancelBubble = true事件中使用event.stopPropagation()（或者，如果您使用jQuery，则可以使用click）。

Answer 3

您需要使用e.stopPropagation();

阻止事件冒泡DOM树，防止任何父处理程序收到事件https://api.jquery.com/event.stoppropagation/的通知

以下是演示：https://jsfiddle.net/j81czwky/

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

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


<table>
  <tr>
    <td>Foo</td>
    <td><button>Bar</button></td>
  </tr>
</table>

选择没有TR的表TD

3 个答案: