DataTable 如何防止在包含超链接的列中单击行答案

【问题标题】：DataTable How to prevent row click in columns containing hyperlinksDataTable 如何防止在包含超链接的列中单击行
【发布时间】：2016-08-11 01:55:42
【问题描述】：

我正在处理一个带有可点击行的 javascript 数据表。单击每一行时，会将浏览器转发到不同的页面。行的一列包含一个超链接。单击超链接时，我不希望触发或管理行单击事件。

这是我实现行点击事件的方式

    $(tableId+' tbody').on( 'click', 'tr', function (e) {
           window.location.href = $(this).attr('url');
    });

【问题讨论】：

请提供html
使用 css pointer-events:none; 或 jquery e.preventDefault(); 怎么样？
你能检查我的答案吗？
您需要在包含href（超链接）的td 上为click 事件类型设置event.stopPropagation()。

标签： javascript jquery datatable

【解决方案1】：

当您向父级添加事件侦听器时，默认情况下事件会向下“冒泡”并将事件附加到所有子级。因此，在这种情况下，您将事件设置在tr（父）上，事件将冒泡并附加到td（子）。因此，据我了解，其中一个td 包含您的href（超链接），因此要阻止最初在父级上设置的click 事件，您必须专门设置另一个事件侦听器event type@ 987654327@ 在此事件的函数中，您只需要状态 event.stopPropagation() ，它将覆盖冒泡的 tr 点击事件。

document.addEventListener('DOMContentLoaded',()=>{
    //SET EVENT ON PARENT(TR), EVENT BUBBLES BY DEFAULT DOWNWARDS THEREFORE TD's WILL INHERIT
    document.getElementById('parent').addEventListener('click',()=>window.location.href = "wherever"); 

    //ADDING ANOTHER EVENT LISTENER OF THE SAME TYPE (CLICK) WHICH BLOCKS THE BUBBLING PROPOGATION DOWNARDS
    document.getElementById('myhyperlink').addEventListener('click',(e)=>event.stopPropagation());
});

【讨论】：

【解决方案2】：

使用preventDefault()

$(tableId+' tbody').on( 'click', 'tr', function (e) {
    e.preventDefault();
    window.location.href = $(this).attr('url');
});

【讨论】：

【解决方案3】：

您可以通过以下方式编写代码：

$(tableId+' tbody').on( 'click', 'tr', function (e) {
     e.preventDefault();
     window.location.href = $(this).attr('url');
});

【讨论】：

【解决方案4】：

您必须禁用该特定列的行点击

$('tableId+' tbody'').on('click', 'td', function () {

         if ($(this).index() == 4 ) { // provide index of your column in which you prevent row click here is column of 4 index
             return;
         }

            // you can do additional functionality by clicking on this column here                         
    });

【讨论】：

【解决方案5】：

如果你想阻止点击锚点重定向页面，你必须简单地捕捉点击事件并禁用它的默认行为。

$("table td a").click(function(e){
  e.preventDefault();
});

您必须阻止默认行为，如果您还要停止传播事件，则不会调用您的其他事件侦听器。在此处查看更多信息：What's the difference between event.stopPropagation and event.preventDefault?

如果您的目标是仅在启用 javascript 时禁用锚链接的重定向，另一种解决方案可能是设置 onclick 属性以禁用默认重定向。但是，这似乎不适用于基于 webkit 的浏览器。

<a href="http://example.com" onclick="javascript:return false;">and example</a>

Here is jsFiddle with example

【讨论】：