在TR点击事件中，我能否排除按钮的点击事件？

Question

我目前在选中表格行时会突出显示，但其中一个单元格中有一个按钮。当我点击按钮时，会触发表格行的点击事件。是否可能将这两者分开？

我的两个调用目前看起来是这样的：

$('table.table-striped tbody tr').on('click', function () {
   $(this).find('td').toggleClass('row_highlight_css');
}); 


$(".email-user").click(function(e) {
    e.preventDefault();
    alert("Button Clicked");
});

我的HTML看起来像这样：

<table class="table table-bordered table-condensed table-striped">
  <thead>
    <tr>
      <th>col-1</th>
      <th>col-2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Some Data</td>
      <td><button class="btn btn-mini btn-success email-user" id="email_123" type="button">Email User</button></td>
    </tr>
  </tbody>
</table>

有没有办法阻止按钮点击事件触发行点击事件？

- user1216398

Answer 1

您需要使用 stopPropagation：

$(".email-user").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    alert("Button Clicked");
});

(另请参阅：event.stopPropagation和event.preventDefault有什么区别？)

- Samuel Caillerie

---

就这样了。谢谢你提供的链接，非常有帮助。 - user1216398

Answer 2

试试这个：

$('.table-striped').find('tr').on('click', function() {
    $(this).find('td').toggleClass('row_highlight_css');
});

$(".email-user").on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
});​

- palaѕн

Answer 3

我认为这是由于事件冒泡引起的，尝试在e.preventDefault();后立即使用e.stopPropagation();

- IsisCode