防止テーブルのtrクリッカブル行時にボタン

Question

でのクリックが、私は私のコードでいくつかの助けをしたいと思います。私はTRでクリックを必要とする

、しかし、ときに私は、モーダルを開く必要があるボタンでクリック...私は「ドンモーダルコードが必要ですが、私の唯一の質問は、ボタンをクリックするとどのように機能を妨げることができるかです。私のコードは正常に動作ベロー

...

\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>

J-タイタス@