DataTable How to prevent row click in columns containing hyperlinks

Question

I am dealing with a javascript datatable with clickable rows. Each row when clicked forwards the browser to a different page. A column of the row contains a hyperlink. When the hyperlin is clicked I don't want the row click event to be fired or managed.

Here is how I have implemented the row click event

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

How about using css `pointer-events:none;` or jquery `e.preventDefault();`? — rmondesilva, Apr 19 '16 at 05:12
You need to set `event.stopPropagation()` for the `click` event type on the `td` which contains the `href` (hyperlink). — Jordan Davis, Apr 19 '16 at 05:34

Jordan Davis · Accepted Answer · 2016-04-19T05:50:36.243

When you add an event listener to a parent, the event by default "bubbles" downwards and attaches the event to all children. So in this case you setting the event on tr (parent) and the event will bubble down and attach itself to the td (children). So one of these td from what I understand contains your href (hyperlink) and so to block the click event which originally was set on the parent, you have to set another event listener specifically of the event type click within the function for this event you simply need state event.stopPropagation() and it will override the tr click event which bubbled down.

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

score 1 · Answer 2 · edited May 23 '17 at 12:23

If you want to prevent clicking on anchor from redirecting a page, you have to simply catch the click event and disable it's default behaviour.

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

You have to just prevent default behaviour, if you would also stop propagation of event, your other event listener wouldn't get called. See more info here: What's the difference between event.stopPropagation and event.preventDefault?

If your goal is to disable redirect of anchor links only when the javascript is enabled, another solution might be to set onclick attribute that would disable default redirect. However, this seems not to work in webkit based browsers.

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

Here is jsFiddle with example

score 0 · Answer 3 · answered Apr 19 '16 at 05:14

0

Use preventDefault()

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

answered Apr 19 '16 at 05:14

afzalex

8,598
2
34
61

score 0 · Answer 4 · edited Apr 19 '16 at 05:38

0

You can write code following ways:

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

edited Apr 19 '16 at 05:38

Vinoth Krishnan

2,925
6
29
34

answered Apr 19 '16 at 05:14

Dilip Oganiya

1,504
12
20

score 0 · Answer 5 · answered Apr 19 '16 at 06:36

you have to disable row click for that particular column

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

DataTable How to prevent row click in columns containing hyperlinks

5 Answers5