[英]jQuery: calling click from keydown, but getting the correct checkbox checked property
这不是jQuery唯一的问题,因为它与事件和操作顺序有关。 考虑以下基于jQuery multiSelect插件的代码(如果可以找到,请张贴引文):
var debug = $('#debug');
var updateLog = function (msg){
debug.prepend(msg + '\n');
};
var title = $('#title').focus();
var container = $('#container');
title.keydown(function(e){
// up or down arrows
if (e.keyCode == 40 || e.keyCode == 38) {
var labels = container.find('label');
var idx_old = labels.index(labels.filter('.hover'));
var idx_new = -1;
if (idx_old < 0) {
container.find('label:first').addClass('hover');
} else if (e.keyCode == 40 && idx_old < labels.length - 1) {
idx_new = idx_old + 1;
} else if (e.keyCode == 38 && idx_old > 0) {
idx_new = idx_old - 1;
}
if (idx_new >= 0) {
jQuery(labels.get(idx_old)).removeClass('hover');
jQuery(labels.get(idx_new)).addClass('hover');
}
return false;
}
// space/return buttons
if (e.keyCode == 13 || e.keyCode == 32) {
var input_obj = container.find('label.hover input:checkbox');
input_obj.click();
return false;
}
});
// When the input is triggered with mouse
container
.find('input:checkbox')
.click(function(){
var cb = $(this);
var class = "checked";
if (cb.prop(class)){
cb.parent('label').addClass(class);
} else {
cb.parent('label').removeClass(class);
}
updateLog( cb.closest('label').text().split(/[\s\n]+/).join(' ') + ': '
+ this.checked + ' , '
+ cb.prop(class));
title.focus();
})
;
请注意,直接单击复选框时与使用空格/输入键选择复选框时,复选框值的不同。 我相信这是因为在keydown
事件期间它正在调用click
,因此复选框的值尚未更改; 相反,如果您实际单击输入,则mouseup
事件发生在click
(?)之前,因此将应用此设置。
multiselect插件不会调用click事件,它具有几乎重复的代码。 我很好奇,是否最好将参数传递给click事件(或使用全局变量)来检测它是由键盘还是鼠标发出的,还是最好执行插件所做的事情并获得代码在keydown函数中。
显然,如果日志是在click()运行之后执行的,则keydown会返回true,但是在click内发生的某些事情是基于输入的检查状态。
将其更改为使用更改事件而不是复选框http://jsfiddle.net/QJsPc/4/的click事件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.