Исключить выберите форму меню события onclick onclick

Question

Я использую DataTables (https://datatables.net), где у меня есть кликабельные строки. Вот мой код для этого:

$(document).ready(function() {
  let city = document.getElementById("cityselect").value;

    var table = $('#resdatatable').DataTable();

    $('#resdatatable tbody').on('click', 'tr', function () {

        var data = table.row( this ).data().id;

         alert ("clicked!");

    } );
} );

В этих кликабельных строках у меня есть поле выбора, которое onchange вызываетВыглядит так:

<select id ="resstatus1" onchange="changeResStatus(1)" data-previousvalue="Confirmed">

У меня проблема в том, что в Chrome (не в Safari) при нажатии на поле выбора появляется предупреждение. Мне нужно сделать это, нажав на кнопку выбораокно не вызывает предупреждение. Как я могу это сделать?

Спасибо!

Answer 1

Я сделал это так, и это работает:

$('#resdatatable tbody').on('click', 'tr', function (e) {
if($(e.target).is('select')){
        e.preventDefault();
        return;
    }
};

Другие упомянутые способы сломали всю функцию щелчка.

Answer 2

Простой и понятный способ добиться этого - использовать функцию stopPropagation для события - это предотвращает всплытие события в DOM-дереве, поэтому обработчики событий в родительских элементах не уведомляются о событии. Если вы примените это к щелчкам на select, то это не вызовет никаких событий, связанных с родительскими ячейками или строками и т. Д.

Демо:

$('#resdatatable tbody').on('click', 'select', function(e) {
  e.stopPropagation();
});

$('#resdatatable tbody').on('click', 'tr', function(e) {
  alert("hello");
});

table {
  border-collapse: collapse;
}

table td {
  border: 1px solid #cccccc;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="resdatatable">
  <tbody>
    <tr>
      <td>Hello, you can click this bit</td>
      <td>
        <select>
          <option>Clicking this won't fire the event</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

Вы можете сделать это, проверив целевой элемент. Я составил небольшую, общую скрипку, которую вы можете проверить. Я считаю, что это то, что вы пытаетесь сделать. Теперь, когда вы нажимаете на элемент select, вы не получите это предупреждающее сообщение, но если вы нажмете на tr где-нибудь еще, вы увидите предупреждающее сообщение.

Fiddle: https://jsfiddle.net/7136cyhp/1/

$(document).ready(function() {
  // let city = document.getElementById("cityselect").value;
  // var table = $('#resdatatable').DataTable();

  $('table td').on('click', function (e) {
    if (e.target !== this) {
      return;
    } else {
      //var data = table.row( this ).data().id;
      alert ("clicked!");
    }
  });
});

table {
  width: 100%;
  border: 1px solid;
}

tr {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select id="test">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
      </select>
    </td>
  </tr>
</table>