冒泡事件沒有停止傳播

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'));
});

table的tr上已經有一個事件，如下所示：

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

問題是，當我單擊錨點內的管理按鈕時（在表行tr ），由於tr event associated ，它也會選擇並突出顯示該角色。 如何阻止這種情況發生？ 如果他們單擊按鈕，我不想選擇tr 。

Answer 1

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

如果將多個偵聽器附加到同一事件類型的同一元素，則會按添加它們的順序調用它們。 如果在一個這樣的調用中，調用event.stopImmediatePropagation（），則不會調用其余的偵聽器。

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