Question

I have a table displaying tabular data in the form of a report. I am trying to make it so when you click anywhere on the row, it navigates to a more detailed view of that particular item.

HTML (from PHP)

'<tr onClick="ViewItem(this, '.$ItemNum.')">'.
    '<td><input type="checkbox" name="chk_'.$ItemNum.'" /></td>'.
    '<td>a</td>'.
    '<td>b</td>'.
    '<td>c</td>'.
'</tr>'

Javascript

function ViewItem(elThisRow, ItemNum)
{
    // If first <td> was clicked, return
    // ?

    // Otherwise, navigate to item
    window.location="/viewitem.php?i=" + ItemNum;
}

Well the clicking and navigation part works fine, but the only thing is, the first has a checkbox control there.

So right now, I cannot really use the checkbox because the page will navigate away when I click it 🙁

Is there any way to figure out which cell was clicked, so I can prevent it from navigating if it’s the first cell?

Thank you

Answer 1

The event object gives you a srcElement or target property (depending on whether you’re on IE or not) so you can see what element was clicked and thus ignore clicks on input elements:

'<tr onClick="ViewItem(event, this, '.$ItemNum.')">'.

function ViewItem(e, elThisRow, ItemNum) {
     if (!e) e = window.event;
     var target = e.srcElement || e.target;

     if (target.tagName.toUpperCase() === "INPUT")
         return;

     window.location="/viewitem.php?i=" + ItemNum;
} 

Demo: http://jsfiddle.net/LXeqV/

More information about the differences between handling events with IE and with other browsers: http://www.quirksmode.org/js/events_properties.html

(Or of course libraries like jQuery do the cross-browser stuff for you.)