javascript - 单击按钮时防止表格 tr clickable-row

Question

我想在我的代码中得到一些帮助:

我需要在 tr 中单击，但是当单击按钮时我需要打开一个模态...我不需要模态代码，我唯一的问题是如何在单击按钮时阻止该功能？

下面我的代码工作正常...

		$(".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

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