鼓泡事件不会停止传播

时间:2017-09-04 18:57:58

标签: javascript jquery

我有一个锚点如下:

<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

3 个答案:

答案 0 :(得分:0)

您可以使用Event.stopImmediatePropagation(),如MDN所述:

  

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

答案 1 :(得分:0)

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

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

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

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

答案 2 :(得分:0)

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

   $("#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");
      }
    });