停止傳播委托事件

Question

我在JSFiddle上有一個DataTables設置。 我希望超鏈接不突出顯示該行。 我用這個例子：

$(document).ready(function() {
  $('#example').DataTable({
    select: {
      style: 'multi'
    }
  });

  $('#example').on('click', 'a.do-nothing', function(e) {
    e.stopImmediatePropagation();
    return false;
  });
});

我似乎無法解決這個問題。 誰能幫我嗎？

Answer 1

看到這個小提琴 。

  $('#example a.do-nothing').on('click', function(e) {
    e.stopImmediatePropagation();
    return false;
  });

根據jQuery文檔 ：

從事件處理程序返回false將自動調用event.stopPropagation()和event.preventDefault() 。 還可以為處理程序傳遞一個false值，作為function(){ return false; } function(){ return false; } 。 因此， $( "a.disabled" ).on( "click", false ); 將事件處理程序附加到disabled了類的所有鏈接，以防止單擊它們時遵循它們，並且還阻止事件冒泡。

因此，您可能會簡單地擺脫： $('#example a.do-nothing').on('click', false); 如果您不需要在a.do-nothing上執行任何其他處理程序。

奇怪的是您的選擇器過濾器為何不起作用：如果我們正在使用過濾器，那么它將起作用：

$('#example td').on('click', '.do-nothing', false);

下面將允許您繼續單擊事件，而不會冒泡單擊DOM並觸發懸停：

  $('#example td').on('click', '.do-nothing', function (e) {
    e.stopPropagation();
  });

Answer 2

為什么不僅僅覆蓋CSS？ 看到這個小提琴 。

這樣，您就無需弄亂javascript。

table.dataTable.stripe tbody > tr.odd.selected, table.dataTable.stripe tbody > tr.odd > .selected, 
table.dataTable.display tbody > tr.odd.selected, table.dataTable.display tbody > tr.odd > .selected {
    background-color: #f9f9f9;
}

table.dataTable.hover tbody > tr.selected:hover, table.dataTable.hover tbody > tr > .selected:hover, 
table.dataTable.display tbody > tr.selected:hover, table.dataTable.display tbody > tr > .selected:hover {
    background-color: #f9f9f9;
}

table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
    background-color: #f6f6f6;
}