Question

我有一张桌子，每一行都有一个复选框。

<table id="myTable">
<tr>
    <td>
       <input type="checkbox" class="checkbox">
    </td>
    <td>
       content
    </td>
</tr>
... more rows
</table>

当我单击一行时，我想选中/取消选中复选框并更改班级。这很好用，但是，当我单击复选框本身时，什么也没有发生。从字面上看，甚至无法检查/取消检查。

$(document).on("click", "#myTable tr", function() {
        var ths = $(this),
            chk = ths.find(".checkbox");

        if (chk.is(":checked")) {
            ths.removeClass("success");
            chk.prop("checked", false);
        } else {
            ths.addClass("success");
            chk.prop("checked", true);
        }
    });

不确定我要丢失什么。

Answer 1

单击复选框，事件会冒泡至TR并切换两次-因为TR单击会这样做。

解决方案：

由于stopping Event propagation通常是一个草率的主意，¹，因此您可以检测谁是接收事件的第一个元素（Event.target）-并采取相应行动：

$("#myTable").on("click", "tr", function(evt) {

  var $tr = $(this),
      chk = $tr.find(".checkbox")[0]; // ! Not a jQuery Object, but a JS Element
  
  // If checkbox was NOT the direct Event.target
  if (chk !== evt.target) {
    chk.checked = !chk.checked; // toggle artificially the checkbox state
  }
  
  // Do the following on whoever was the Event.target
  $tr.toggleClass("success", chk.checked);

});

.success { background: #0bf; }

<table id="myTable">
  <tr>
    <td>
      <input type="checkbox" class="checkbox">
    </td>
    <td>
      content
    </td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

请注意，如果delegateTarget #myTable元素的tr 是静态的event attaching to current or future处理程序，则请使用$("#myTable")代替$(document)作为静态选择器。

¹要论证为什么using Event.target比Event.stopPropagation()更受推荐：
例如：<body>之类的元素，饥饿地等待事件来触发通知，或者关闭打开的模式，但从不注册，从而导致用户界面损坏。

复选框被单独选中时不起作用

1 个答案:

解决方案：