Проблема с пузырем событий и флажком JavaScript

1

Я пытаюсь создать таблицу HTML с флажками в ее самом левом столбце. Я хочу, чтобы у меня была возможность установить флажок, щелкнув в любом месте элемента <tr>. Я получил его на работу, но я, когда я нажимаю флажок, не меняет состояние. Я тестировал это в Firefox 54 (меня не интересуют другие браузеры).

Я сделал JSFiddle, демонстрирующий свою проблему https://jsfiddle.net/a92to0tu/ 

let table = document.querySelector("table");
table.addEventListener("click", function(e) {
  e.preventDefault();
  let tr = e.target.closest("tr");
  let checkbox = tr.firstElementChild.firstElementChild;
  
  // This doesn't work
  checkbox.checked = !checkbox.checked
  
  // This works but I don't like it
  // setTimeout(function() {
  //   checkbox.checked = !checkbox.checked
  // }, 100);
});
<table>
  <tr>
 <td><input type="checkbox"></td>
<td>Click works here too</td>
  </tr>
  <tr>
<td><input type="checkbox"></td>
<td>Click works here too</td>
  </tr>
</table>

<p>I can click the text/table row, but clicking the checkbox no longer works</p>
  • 0
    Проверьте, является ли выбранный элемент флажком - см. Обновленную скрипку
  • 0
    Пожалуйста, не размещайте код в другом месте. Ссылки гниют, см. Как создать минимальный, полный и проверяемый пример .
Показать ещё 5 комментариев
Теги:

2 ответа

1
Лучший ответ

Вы должны установить условие, чтобы убедиться, что клик не нацелен на этот флажок:

if(e.target !== checkbox) {


let table = document.querySelector("table");
table.addEventListener("click", function(e) {
  let tr = e.target.closest("tr");
  let checkbox = tr.firstElementChild.firstElementChild;
  
  if (e.target !== checkbox) {
checkbox.checked = !checkbox.checked
  }
});
<table>
  <tr>
 <td><input type="checkbox"></td>
<td>Click works here too</td>
  </tr>
  <tr>
<td><input type="checkbox"></td>
<td>Click works here too</td>
  </tr>
</table>

<p>I can click the text/table row, but clicking the checkbox no longer works</p>
Поделиться
2

Используйте элемент label, тогда вам вообще не нужен скрипт.

table {border-collapse: collapse;}
td { border: 1px solid #999999;}
<table>
  <tr><td><input type="checkbox" id="foo" name="foo">
      <td><label for="foo">Works here too!</label>
      <td><label for="foo">Works here three!</label>
</table>
Поделиться
  • 0
    Это не то, что я хочу. Мой минимальный пример этого не передает, но я хочу, чтобы любая ячейка в <tr> переключала флажок.
  • 0
    Затем поместите метку во все клетки. ;-)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню