如何忽略td中的复选框

Question

我正在使用 jQuery 的事件委托向表格行添加点击事件。我在该行的第一个 td 中也有一个复选框。当我单击行中的任意位置时，一切都按预期工作。但是，当我单击复选框时，我不希望该事件起作用。我尝试使用 :not() 选择器，但也许我遗漏了一些东西，因为当我单击复选框时我仍在触发事件。

HTML

<tr>
    <td>
        <div class="myCheckbox"><input type="checkbox" name="userName" /></div>
    </td>
    <td><a href="/go/to/user/profile"></a></td>
    <td>more info</td>
    <td>more info</td>
    <td>more info</td>
</tr>

jQuery

$('table tr:not(':checkbox')').on('click', 'td', function(event) {

    // Do something
});

我可以得到帮助来解决我正在尝试做的事情吗？

Answer 1

两个选项（都涉及从现有代码中删除 tr:not 内容，正如您所说，这不起作用 - tr 元素不能是复选框，:not 检查元素，而不是其内容） ：

1. 向调用e.stopPropagation 的复选框添加一个事件处理程序。然后点击事件不会到达该行。您可以直接或通过委托来执行此操作。 Here's a live example 直接。如果您采用间接方式，请务必在您打算支持的所有浏览器上测试单击激活复选框（如果您将拥有它们）的labels。

   或

2. 将此添加到您的处理程序：

   if ($(event.target).is('input[type=checkbox]')) {
       return;
   }
   

   例如：

   $('table').on('click', 'td', function(event) {
   
       if ($(event.target).is('input[type=checkbox]')) {
           return;
       }
   
       // Logic here
   });
   

   这可以通过测试事件的来源来查看它是否是一个复选框，并尽早退出。

在这两种情况下，如果您使用label 激活复选框，您可能需要对标签执行相同的操作。

我很好奇#2 处理labels 会是什么样子，结果证明它足以移动到一个函数中，但并不难&mdash 可能我会怎么做：Live example | source

jQuery(function($) {

  // The table cell click handler
  $("table").on("click", "td", function(e) {
    // Is the source a checkbox or the label for
    // one?
    if (isCheckbox($(e.target))) {
      return;
    }

    // Normal handling
    $(this).toggleClass("foo");
  });

  // Function to test whether the source is a
  // checkbox, or the label of a checkbox
  function isCheckbox($elm) {
    var chkid;

    if ($elm.is("input[type=checkbox]")) {
      return true;
    }
    if ($elm.is("label")) {
      chkid = $elm.attr("for");
      if (chkid) {
        return $("#" + chkid).is("input[type=checkbox]");
      }
      return !!$elm.find("input[type=checkbox]")[0];
    }
    return false;
  }

});

Answer 2

尝试使用 stopPropagation() 来防止事件冒泡。

$('div.myCheckbox input[type=checkbox]').bind('change', function(e) {
  e.stopPropagation();

  //do stuff here
});