Question

搜索了几个小时后，我似乎无法弄清楚为什么jQuery触发的点击事件没有将实际事件传递给click函数。以下是一个示例：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。

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

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（）还可以防止在您单击复选框时向下传递事件，因此不会触发对该行的单击。

更新这是另一个小提琴，只检查/取消选中复选框，如果正在进行换班： http://jsfiddle.net/4hfwsh5q/8/

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

2 个答案: