javascript - Click handler for element with highest z-index only -

in page i'm creating there webgrid components serving master grids, , on clicking row, details area shown. every row shall have delete button, clicking button, row deleted.

now because have click handler #mygrid tbody tr, , button (which image) inside tr, both click handlers executed when click on button. can prevent , execute click handler button, is, "top" element?

here jsfiddle demonstrating i'm doing

is there elegant way this, or there maybe alternative i'm doing?

for reference, here's shorter sample code. html:

<table id="tbl">   <tr>     <td><img src="someimage.png" class="delete-button" /></td>   </tr> </table> 

javascript:

$(document).ready(function () {   $("#tbl tr").click(function () {     alert("row click");   });   $(".delete-button").click(function () {     alert("delete-button click");   }); }) 

use stoppropagation

prevents event bubbling dom tree, preventing parent handlers being notified of event.

$(".delete-button").click(function (e) {     //                              ^     alert("delete-button click");     e.stoppropagation();     // ^^^^^^^^^^^^^^^^ }); 

https://jsfiddle.net/tusharj/nbvdw0q1/3/

docs: http://api.jquery.com/event.stoppropagation/