javascript - 可点击 tr 但不能点击子项

Question

目前，我有一个表，每一行都在点击事件处绑定(bind)了一个函数。

HTML:

<tr class="clickable">
...... 
  <td class="text-center">
    <div class="btn-group">
        <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span>
        </button>
        <ul class="dropdown-menu pull-right text-left">
            <li><a href="#mymodalpath"><i class="fa fa-pencil-square-o"></i> View details</a></li>
            <li class="divider"></li>
            <li><a href="#mymodalpath" data-toggle="ajaxModal"><i class="fa fa-trash-o"></i> Delete</a></li>
        </ul>
    </div>
  </td>
</tr>

JS:

$(document).on('click', ".clickable", function (e) { /*something*/ });

我读到了有关 e.stopPropagation() 方法的信息，但我需要一些动态的东西，因为例如在上面的示例中，下拉菜单是我无法管理的外部插件。

--- 编辑有没有办法处理TR的点击但不触发子元素？

Answer 1

由于事件传播，单击子元素将自动向上传播，直到到达具有该事件的父元素 .clickable。 e.stopPropagation() 起作用的唯一方法是，如果您将事件处理程序放在所有子级上，以便它停止向上移动到父级，这可能不是您想要做的事情。相反，您只需检查事件并准确查看实际触发调用的内容...

$(document).on('click', ".clickable", function (e) {
  if ($(e.target).hasClass('clickable')) {
    // target is the exact element that is being clicked on, you can test if it is the one
    // one with the 'clickable' class name, or however you want to distinguish it.  If it
    // doesn't get in here, then it is some child element you don't care about.
  }
});