jQuery tr 的点击处理程序，td 中的元素除外

Question

我已将点击处理程序附加到 table 行元素，我需要一些帮助来排除具有 class 子菜单 的元素来自点击处理程序。

我尝试使用 jQuery :not 选择器来成功排除整个 td 元素，但这不是我想要的想要。

下面的代码需要 jQuery, Bootstrap and FontAwesome 才能工作。请参考上面的 JsFiddle link。

HTML

<table class="table">
  <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Details</th>
        <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>123</td>
        <td>Name 1
            <div class="pull-right sub-menu">
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><i class="fa fa-chevron-down"></i>

                    </button>
                    <ul class="dropdown-menu pull-right" role="menu">
                        <li><a href="#">Edit</a></li>
                        <li><a href="#">Delete</a></li>
                        <li><a href="#">Block</a></li>
                    </ul>
                </div>
            </div>
        </td>
        <td>New User</td>
        <td>Pending</td>
    </tr>
  </tbody>
</table>

Javascript

$(function() {
  $('table tr').on('click', function() {
    alert('Clicked');
  });
});

** -- 编辑 -- **

更新了 JsFiddle。我在下面添加了包含答案的评论。

// The below "if" condition is the ANSWER.

Answer 1

您可以使用 stopPropagation 来阻止点击传播到 tr:

$('.sub-menu').on('click', function(e){
     e.stopPropagation(); 
});

Answer 2

一种解决方案是查看点击的目标是否在具有 class sub-menu

的元素内

$(function() {
  $('table tr').on('click', function(e) {
    if (!$(e.target).closest('.sub-menu').length) {
      //do your stuff
      alert('Clicked');
    }
  });
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Details</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123</td>
      <td>Name 1
        <div class="pull-right sub-menu">
          <div class="btn-group">
            <button type="button" class="btn btn-default btn-xs dropdown-toggle edit-asset" data-toggle="dropdown" style="border: none;">
              <i class="fa fa-chevron-down"></i>

            </button>
            <ul class="dropdown-menu pull-right" role="menu">
              <li><a href="#">Edit</a></li>
              <li><a href="#">Delete</a></li>
              <li><a href="#">Block</a></li>
            </ul>
          </div>
        </div>
      </td>
      <td>New User</td>
      <td>Pending</td>
    </tr>
  </tbody>
</table>

jQuery tr 的点击处理程序，td 中的元素除外

jQuery click handler for tr except for an element within a td

jquery

html-table

click

onclick