Событие Onclick для элемента таблицы tr и предотвращение события для кнопки, флажок

Question

Я пытаюсь добавить событие onclick в элемент таблицы tr. Также предотвратите событие tr onclick для кнопки, флажок которого является элементом TD.

Это то, что я пробовал

<table class="table table-list table-bordered table-form-control">
   <colgroup>
      <col width="40" />
      <col width="70%" />
      <col width="*" />
   </colgroup>
   <thead>
      <tr>
         <th>check</th>
         <th>text</th>
         <th>btn</th>
      </tr>
   </thead>
   <tbody>
      <tr class="clickable" onClick="location.href='http://www.google.com/'">
         <td>  
            <input type="checkbox" name="" id="cca2" class="checkbox">
            <label for="cca2" class="ml3"><span class="icon"></span></label>
         </td>
         <td>text</td>
         <td>
            <div class="dropdown">
               <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">not use <span class="caret"></span></button>
               <ul class="dropdown-menu pull-right">
                  <li><a href="#"><span class="ico-paper"></span>Tooltip</a></li>
               </ul>
            </div>
         </td>
      </tr>
   </tbody>
</table>

Я ожидаю результат, который предотвращает событие TR Onclick для кнопки иГалочка,

Answer 1

Используйте event.stopPropagation(), чтобы ограничить событие элементом, по которому вы непосредственно щелкнули, и прекратить распространение на его родительские элементы.

Запустите фрагмент кода ниже;Я добавил .clickButton класс к кнопке и прикрепил событие jquery click с параметром event, затем использовал event.stopPropagation(); внутри функции.

$(".clickButton").click(function(event){
  event.stopPropagation();
  alert("Button Click!");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table border="1" cellpadding="10">
  <tbody>
    <tr onClick="alert('Tr Click!');">
      <td>1</td>
      <td>2</td>
      <td><button class="clickButton">Click Me</button></td>
    </tr>
    <tr onClick="alert('Tr Click!');">
      <td>3</td>
      <td>4</td>
      <td><button class="clickButton">Click Me</button></td>
    </tr>
  </tbody>
</table>