Prevent click event on parent element when image clicked

Question

I am trying to stop a second piece of JS running as a result of the click event propagating to the parent element but I am stuck.

I have the following HTML for rows in a table:

<tr id="DEMO01-P" role="row" class="odd">
   <td><img id="DEMO1" src="../imagedir/edit.png" onclick="Edit(this.id);">Info here</td>
   <td>And here</td>
</tr>

I have a click event on the tr like this:

  jQuery('#system-tbl tbody').on('click', 'tr', function () {
    var self = jQuery(this);
    if ( self.hasClass('selected') ) {
      self.removeClass('selected');
    } else {
      table.$('tr.selected').removeClass('selected');
      self.addClass('selected');
    }
    DO STUFF....
  });

I also do something else if the user clicks on the img inside the tr using onclick="Edit(this.id);" :

function Edit(system_id) {
    alert("Edit: " + system_id);
    window.location.href = "/go-to-page/";
};

How do I stop the tr event in the call to Edit(this.id); ? Thanks!!

Answer 1

Use

<td><img id="DEMO1" src="../imagedir/edit.png" onclick="Edit(event,this.id);">Info here</td>

and

function Edit(e,system_id) {
::
e.stopPropagation()
}