Click on , but only if clicked is not an

Question

I have a table with structure like this :

 <table>
 <tr id="ui-id-7" onclick="editThis();">
 <td>100</td>
 <td>Test</td>
 <td class="noEdit"><a href="www.mysite.com" target="_blank"><img src="www.mysite.com/test.jpg"></a></td>
 </tr>
 </table>

What I need : the entire <tr> is clickable and calls the editThis() method, UNLESS if the user clicks on the <td> that has the link element (in case, the one with noEdit class).

In the code above, clicking on ANY <td> (or the <tr>) will call the editThis() method. I know I could write the call for each <td> instead of the <tr>, but this would be a lot of writing...

Is this possible?

http://stackoverflow.com/questions/9012537/how-to-get-the-element-clicked-for-the-whole-document — Martijn, Feb 20 '14 at 17:41

score 7 · Accepted Answer · answered Feb 20 '14 at 17:35

7

Use event.stopPropagation()

$('#ui-id-7 td.noEdit').click(function(e){
   e.stopPropagation();
});

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event

answered Feb 20 '14 at 17:35

Tushar Gupta - curioustushar

58,085
24
103
107

1

@delphirules and that's exactly what the answer does. If you also want to prevent the page to navigate to the `href` value than add `e.preventDefault();` too. – Roko C. Buljan Feb 20 '14 at 17:39
Why is this only works on the in the first row? – Jacob Zielinski Jan 23 '20 at 10:18

Click on , but only if clicked is not an

1 Answers1