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

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

Итак, я реализовал код -

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

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

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

Всего 2 ответа


Проблема заключается в том, что когда вы нажимаете на флажок, 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() для самого флажка здесь не будет работать, так как вы используете делегированный обработчик события (поэтому событие уже всплыло до того, как оно было перехвачено).


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

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

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

event.stopPropagation()

Есть идеи?

10000