Question

我有一个锚点如下：

<table id="datatable_users">
  <tr>
    <td>
      <a href="#/id=1" class="ClassUpdateConfig btn btn-info btn-right-margin" data-id="1"> 
          <span class="glyphicon glyphicon-pencil"></span>&nbsp;Manage
      </a>
    </td>
  </tr>
</table>

我附上了以下事件：

$(document).on('click','.ClassUpdateConfig', function(e){
    e.stopPropagation();
    redirectTo(localeURI+'admin/system/users/edit/'+$(this).attr('data-id'));
});

tr的{{1}}附加了一个事件，如下所示：

table

问题是，当我点击锚点内的管理按钮（在表格行$("#datatable_users tbody").on("click","tr", function(){ $(this).toggleClass("selected"); });内）时，它会选择并突出显示该角色，因为tr。如何阻止这种情况发生？如果他们点击按钮，我不希望选择tr event associated。

Answer 1

您可以使用Event.stopImmediatePropagation()，如MDN所述：

如果多个侦听器连接到同一个元素事件类型，按照添加它们的顺序调用它们。如果在一次这样的调用中，调用event.stopImmediatePropagation（），no 剩下的听众将被召集。

Answer 2

最简单的方法是确保处理程序在单击锚点时不会触发，只需添加一个条件

$("#datatable_users tbody").on("click", "tr", function(e){
    if ( $(e.target).closest('a').length === 0 ) {
        $(this).toggleClass("selected");
    }   
});

停止传播的原因并不起作用，因为处理程序附加到document，而不是元素。

如果动态插入这些元素，您可以通过不将事件委托给document级来解决问题。

Answer 3

您可以测试该元素是否为父容器

   $("#datatable_users tbody").on("click", "tr", function(e){
      if(e.target === this){
        $(this).toggleClass("selected");
      }
    });

编辑：上述方法可能效果不佳，因为e.target获取最内层元素，通常为td而不是tr。通过明确检查目标元素类型，以下方法可以更好地工作：

   $("#datatable_users tbody").on("click", "tr", function(e){
      if(!$(e.target).is('a')){
        $(this).toggleClass("selected");
      }
    });

鼓泡事件不会停止传播

3 个答案: