onclick is set for <tr> How to disable for one <td>

Question

Suppose onclick handler is set for a <tr> is it possible to disable/overwrite it for one particular <td>?

<tr onclick='somefunction()'> <td> </td> <!--onclick should work here--> ... <td> </td> <!--onclick should not work here--> ... <td> </td> <!--onclick should work here--> </tr>

Of course I can set it for each <td> separately or pass the name of a td to the function and decide what to do based on this name, but it seems like there should be a simpler solution.

Answer 1

I found the easiest was to stop the event being passed to the parent html using onclick=event.stopPropagation() in the <td> tag.

So <td class=whatever onclick=event.stopPropagation()>cell data<td>

Answer 2

In somefunction you could check the cellIndex of the td, and return early, if a non-clickable cell has been clicked. Something like this:

function somefunction (e) {
    if (e.target.cellIndex === 1) {return;}
    /* Do something, the td is clickable */
}

To get this work with an inline handler, you've to pass the event object:

<tr onclick='somefunction(event)'>

A live demo at jsFiddle.

Things will get a bit more complex, if you've elements within cells. In that case you have to find a td parent element, like so:

function somefunction (e) {
    var target = e.target; // Cache the target element
    while (target) { // Iterate through elements
        if (target.tagName === 'TD') { // TD found, stop iteration
            break;
        }
        target = target.parentElement; // Set target as a parent element of the current element
    }
    if (target === null) {return;} // Check that we really have a TD
    if (target.cellIndex === 1) {return;} // A non-clickable cell clicked
                    :
}

A live demo at jsFiddle.

Edit 2018 In 2018 elements have closest() method, hence the loop above is not needed, target = e.target.closest('td') will make sure a td is used.

A very simple way would be to use CSS pointer-events: none, but unfortunately this doesn't work in FF in this particular case in IE<11 at all, though works well in Chrome and IE11. Also preventing pointer events would be bad, if the cell happens to contain interactive elements.

A live demo at jsFiddle.