搜索了几个小时之后,我似乎无法弄清楚为什么jQuery触发的click事件没有将实际事件传递给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。
为什么从行中触发单击事件会导致原始事件未传递给单击处理程序?
您正在触发复选框上的新事件,而不是传递原始事件。在那种情况下,没有按下班次。我会使用命名函数来避免这种混淆,如下所示:
$(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):https://stackoverflow.com/a/6158050/405623
从功能上看,你可以拥有想要在行中的任何点击上运行的功能,并在里面定义它是什么类型的事件。我的意思是摆脱在一个地方处理它们的事件。