Possible to ovveride javascript events?

Question

I am wondering if it's possible to have a click event in javascript on both the table row and the icon column without the tr event happening instead. The table looks like this atm

<table id="the-table"> 
  <tr>
    <td class="name">a name</td>
    <td class="description">a description</td>
    <td class="time">00:00:00</td>
    <td class="icons"><i class="fa fa-info"></i></td>
  </tr>
  <tr>
    <td class="name">a name</td>
    <td class="description">a description</td>
    <td class="time">00:00:00</td>
    <td class="icons"><i class="fa fa-info"></i></td>
  </tr>
</table>

and I have 2 click events bound to it.

$( "#the-table tr" ).click(function() {
 //do something
});

$( "#the-table .icons i" ).click(function() {
 //do something else
});

but every time i try to fire the click event on teh icon te table row event fires instead. is it possible to catch the tr event and just fire the icon click?

Answer 1

Yes, you call e.stopPropagation() from the handler of the icon click, so that the click doesn't propagate ("bubble") to the row:

$( "#the-table .icons i" ).click(function(e) {
 e.stopPropagation();
 //do something else
});