防止表TR點擊排在點擊按鈕

Question

我想在我的代碼一些幫助：

我需要在TR點擊，但是當單擊按鈕，我需要打開一個模式......我不t需要模態代碼，我唯一的問題是如何在單擊按鈕時阻止該功能？

婁我的代碼做工精細...

\t \t $(".datagrid").delegate('tbody tr', 'click', function(e) { 
 
\t \t  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

檢查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>