javascript - IE11 和 Chrome 中的点击事件传播不同？

Question

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

这看起来像是一个简单的 jQuery:

td.click(function() {
    $(this).find("input").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();
        });
    });

希望它有用。