繁体   English   中英

jQuery:从keydown调用click,但获得正确的复选框选中属性

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM