Attaching click event only to the row, not the links

Question

I have an HTML table where I've attached a click event to its rows where once a row is clicked, the "active" class is toggled (added and removed).

There are links inside this table that have their own click events attached.

Is there a way to prevent those links click events from toggling the row class?

$("table tbody tr").on("click", function(){
    $(this).toggleClass('active');
});

$("table tbody a").on("click", function(){
    //do something else but don't toggle the active class
});

Answer 1

You can call stopPropagation() on the a click event to prevent it propagating up the DOM to the parent tr:

$("table tbody a").on("click", function(e) {
  e.stopPropagation();
  // do something 
});