Question

我正在使用jQuery的事件委托向表行添加click事件。我在行的第一个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检查元素，而不是其内容）：

将事件处理程序添加到调用e.stopPropagation的复选框。然后点击事件将不会到达该行。您可以直接或通过委派来实现。 Here's a live example直接进行。如果你是间接的，请务必在你想要支持的所有浏览器上测试点击激活复选框的label（如果你想要的话）。

或

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

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

E.g：

$('table').on('click', 'td', function(event) {

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

    // Logic here
});

这可以通过测试事件的来源来确定它是否是一个复选框，并提前退出。

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

我对＃2处理label的样子感到好奇，结果发现它已经足够代码进入一个函数了，但不是很难以及我可能会如何去做{{3 }} | Live example

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
});

如何忽略td内的复选框

2 个答案: