Question

So I have a table with X rows in it. I have the following HTML code:

<tr id='row1' onClick="FormTRClick('1')"><td><a href='#'>Bla</a></td></tr>
<tr id='row2' onClick="FormTRClick('2')"><td><a href='#'>Bla</a></td></tr>
<tr id='row3' onClick="FormTRClick('3')"><td><a href='#'>Bla</a></td></tr>
<tr id='row4' onClick="FormTRClick('4')"><td><a href='#'>Bla</a></td></tr>

Now, when you click on the hyperlink ‘Bla’ you will also activate the OnClick event. Is there a way to only trigger the OnClick event when you don’t click on an object (like button, image, href) but only on the table row itself?

My FormTRClick() function looks as follow:

function FormTRClick(ctrl) {
   if (document.getElementById('chk' + ctrl).checked == true) {
    document.getElementById('chk' + ctrl).checked = false;
   } else {
    document.getElementById('chk' + ctrl).checked = true;
   }
}

I know I could also use the inverse document.getElementById('chk' + ctrl).checked = !document.getElementById('chk' + ctrl).checked but that’s not the point, I have extra code in there.

Thanks

Answer 1

You’ll want to attach an event listener to those clicks, and stop the propogation:

https://developer.mozilla.org/en/DOM/event.stopPropagation

---

Alternatively, you can check for the target element:

HTML:

<tr id='row1' onClick="FormTRClick(event, '1')"><td><a href='#'>Bla</a></td></tr>
<tr id='row2' onClick="FormTRClick(event, '2')"><td><a href='#'>Bla</a></td></tr>
<tr id='row3' onClick="FormTRClick(event, '3')"><td><a href='#'>Bla</a></td></tr>
<tr id='row4' onClick="FormTRClick(event, '4')"><td><a href='#'>Bla</a></td></tr>

Javascript:

function FormTRClick(event, ctrl) {
    if (event.target.tagName != 'A' && document.getElementById('chk' + ctrl).checked == true) {
        document.getElementById('chk' + ctrl).checked = false;
    } else {
        document.getElementById('chk' + ctrl).checked = true;
    }
}