防止表在单击按钮时出现可点击行

Question

I would like some help in my code:

I need the click in tr, but when click in the button i need open a modal... I don't need the modal code, my only question is how I can prevent the function when click the button?

Bellow my code work fine...

  $(".datagrid").delegate('tbody tr', 'click', function(e) { e.preventDefault(); console.log('OK.. I need this click in TR'); console.log('But, how to prevent if click comes the button???'); }); 

 .table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background-color: #c5dffa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table" class="table table-hover dataTable datagrid" cellspacing="0"> <thead > <tr> <th></th> <th>BLABLA</th> <th>BLEBLE</th> <th>BLIBLI</th> </tr> </thead> <tbody> <tr class="clickable-row"> <td> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" > button </button> </div> </td> <td>blablablablabla</td> <td>blebleblebleble</td> <td>bliblibliblibli</td> </tr> </tbody> </table> 

Answer 1

Check e.target.tagName :

 $(".datagrid").delegate('tbody tr', 'click', function(e) { e.preventDefault(); if (e.target.tagName == 'BUTTON') { console.log('The button was clicked'); } else { console.log('The TR was clicked (not the button)'); } }); 

 .table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background-color: #c5dffa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table" class="table table-hover dataTable datagrid" cellspacing="0"> <thead> <tr> <th></th> <th>BLABLA</th> <th>BLEBLE</th> <th>BLIBLI</th> </tr> </thead> <tbody> <tr class="clickable-row"> <td> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"> button </button> </div> </td> <td>blablablablabla</td> <td>blebleblebleble</td> <td>bliblibliblibli</td> </tr> </tbody> </table>