Question

我有一个带有一行复选框的表。我希望用户能够通过单击包含复选框的单元格中的任意位置来检查复选框。

这似乎是一个简单的jQuery：

td.click(function() {
    $(this).find("input").click();
}

我的意图是单击单元格会触发复选框上的click事件。这很有效。

在IE11和Chrome中，如果我在单元格中单击复选框，则会切换复选框，就像我想要的那样。

在IE11中，如果我在复选框内单击，则会切换复选框。但是如果在Chrome中，我点击复选框内部，看起来没有任何反应。

在调试器中完成此操作，看起来我的事件处理程序在IE和Chrome中都被调用了两次。看起来，当我选中Chrome中的复选框时，它会在第一个电话中被检查，然后在第二个电话中取消选中。在IE11中，第一次将复选框变为黑色，然后在第二次复选框中进行检查。

鉴于对处理程序的两次调用，我尝试了：

td.click(function(event) {
    var input = $(this).find("input");
    event.stopPropagation();
    input.click();
}

这没有任何区别。处理程序仍然被调用两次。

想法？

Answer 1

原因是当您直接点击复选框时，事件也会传播到表格列。

因此，要从列中停止事件传播，请尝试：

 $(function() {
        $('#tbl').find('td input[type="checkbox"]').click(function(e) {
            e.stopImmediatePropagation();
        })
        $('#tbl').find('td').click(function(e) {
            $(this).find("input").click();
        });
    });

希望它有用。

Answer 2

这是因为单击复选框也会在td上单击注册。在我看来，IE对它的处理是不正确的，但这在这里并不重要。

我只是更改checked属性而不是触发click事件。我还将我的选择基于事件目标，以便它不会定位复选框，如果它是单击的那个。

td.click(function(e) {
    $(e.target).find("input").prop('checked', function (i, propValue) {
        return !propValue;
    });
});

在IE11和Chrome中点击事件传播有何不同？

2 个答案: