Как ограничить щелчок мышью флажка и триггер от JS?

Question

У нас есть таблица сетки и несколько столбцов, включая Select Box (CheckBox)
Теперь ожидаемое поведение при нажатии на соответствующую строку CheckBox должен быть проверен и при нажатии CheckBox он должен обновляться.

Так что я реализованный код -

$("#table_id").on("click", ".table-body-row", function(){
    $(':checkbox', this).trigger('click');                                  
});

Это работает для строки, но когда я нажимаю на соответствующий CheckBox, он нажимается 2 раза
- Первый раз, когда щелчок мыши происходит на CheckBox
- Второй раз, когда выше функция Вам позвонят

Кто-нибудь может помочь здесь, есть ли другой способ справиться с этим сценарием?

Answer 1

Проблема в том, что при нажатии на флажок состояние checked изменяется. Затем событие продолжает всплывать в DOM и перехватывается вашим обработчиком событий в строке, которая затем сбрасывает проверенное состояние обратно к его начальному значению, поэтому ничто не выглядит иначе.

Чтобы это исправить, вы можете проверить что целью события был флажок, и если это так, оставьте свойство checked как есть:

$("#table_id").on("click", ".table-body-row", function(e) {
  if (!$(e.target).is(':checkbox'))
    $(':checkbox', this).prop('checked', (i, checked) => !checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_id">
  <tr class="table-body-row">
    <td>Lorem ipsum</td>
    <td>Foo bar</td>
    <td><input type="checkbox" />
  </tr>
</table>

Обратите внимание на явное использование prop() здесь для запуска события в элементе. Также обратите внимание, что вызов stopPropagation() для самого флажка здесь не будет работать, так как вы используете делегированный обработчик события (поэтому событие уже всплыло до того, как оно было перехвачено).

Answer 2

Не передавайте щелчок, используйте опору, чтобы изменить выбор флажка.

 $(':checkbox', this).prop('checked', true);
 $(':checkbox', this).prop('checked', false);

Если это проблема с пузырьками, вам может потребоваться остановить распространение события.

event.stopPropagation()