jQuery触发触发点击事件但不发送事件数据

Question

搜索了几个小时后，我似乎无法弄清楚为什么 jQuery 触发的点击事件没有将实际事件传递给点击函数。这是一个示例：jsfiddle。

$(document).ready(function () {
    $('tr').click(function (event) {
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger("click");
        }
    });

    $(':checkbox').click(function (event) {
        console.log(event.shiftKey);
    });
});

如果我单击第一个复选框，控制台会按预期记录“false”。然后，如果我按住 shift 键并选中最后一个复选框，控制台会按预期记录“true”，因为单击该框时，shift 被按住。

现在转到数据并单击行而不是复选框。无论在单击一行时是否按住 shift 键，都会触发复选框单击事件，并根据需要选中/取消选中该框，但 event.shiftKey 始终返回 false。

为什么从行触发点击事件会导致原始事件未传递给点击处理程序？

Answer 1

完全模拟鼠标点击并不像看起来那么简单。在这里你可以找到它的详细代码（不使用 jQuery）：https://stackoverflow.com/a/6158050/405623

从功能的角度来看，您可能拥有想要在行中的任何点击和内部定义它是什么类型的事件时运行的功能。我的意思是摆脱生成事件以在一个地方处理它们。

Answer 2

您在复选框上触发了一个新事件，而不是传递原始事件。在那种情况下，不会按下任何档位。我会使用命名函数来避免这种混淆，如下所示：

$(document).ready(function () {
    $('tr').click(function (event) {
        console.log('Row clicked');
        eventHandler(event, this);
    });

    $(':checkbox').click(function (event) {
        event.stopPropagation();
        console.log('Checkbox clicked');
        eventHandler(event, this);
    });

    function eventHandler(event, elem){
        console.log(event.shiftKey);
        $(':checkbox', elem).click();
    }
});

小提琴：http://jsfiddle.net/4hfwsh5q/7/

stopPropagation() 还可以防止在您单击复选框时将事件进一步向下传递，因此不会触发对该行的单击。

更新这是另一个只在 shift 被保持时检查/取消选中复选框的小提琴： http://jsfiddle.net/4hfwsh5q/8/