Question

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

以下是我实现行点击事件的方法

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

Answer 1

当您向父级添加事件侦听器时，默认情况下该事件会向下“冒泡”并将事件附加到所有子级。因此，在这种情况下，您可以在tr（父级）上设置事件，并且事件将向下冒泡并将其自身附加到td（子级）。因此，根据我的理解，其中一个td包含您的href（超链接），因此要阻止最初在父级上设置的click事件，您必须专门设置另一个事件侦听器在此事件的函数中，event type click只需要状态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());
});

Answer 2

使用preventDefault()

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

Answer 3

您可以按照以下方式编写代码：

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

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

Answer 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

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

5 个答案: