jquery 从keydown调用click,但获取正确的checkbox checked属性

xdnvmnnf  于 2022-12-12  发布在  jQuery
关注(0)|答案(1)|浏览(119)

这不是一个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内部发生的一些事情是基于输入的选中状态的。

i1icjdpr

i1icjdpr1#

将其更改为使用复选框http://jsfiddle.net/QJsPc/4/的change事件而不是click事件

相关问题