这不是一个jQuery独有的问题,因为它与事件和操作顺序有关。考虑下面的代码,它是基于jQuery multiSelect插件的(如果你能找到的话,请发表引文):
Fiddle with it here(第一个字母)
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内部发生的一些事情是基于输入的选中状态的。
1条答案
按热度按时间i1icjdpr1#
将其更改为使用复选框http://jsfiddle.net/QJsPc/4/的change事件而不是click事件