jQuery: вызывать щелчок по нажатию клавиши, но получить правильную галочку - PullRequest
0 голосов
/ 30 сентября 2011

Это не только вопрос 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();
    })
;

Обратите внимание наразница в значении флажка, когда вы нажимаете непосредственно на флажок, по сравнению с тем, когда вы выбираете флажок с помощью клавиши пробела / ввода.Я полагаю, это потому, что он вызывает click во время события keydown, поэтому значение флажка еще не изменилось;тогда как если вы на самом деле щелкаете по входу, событие mouseup наступает перед click (?), поэтому настройка применяется.

Плагин множественного выбора не вызывает событие click, он имеет почти повторяющийся код,Мне любопытно, будет ли лучше передать параметр событию click (или использовать глобальный), чтобы определить, выдан ли он клавиатурой или мышью, или лучше просто сделать то, что сделал плагин, и получить кодвнутри функции keydown.

Очевидно, что если бы журнал был после запуска click (), keydown вернул бы истины, но внутри click есть вещи, основанные на проверенном состоянии ввода.

1 Ответ

3 голосов
/ 30 сентября 2011

Изменено это использование события изменения вместо события щелчка для флажков http://jsfiddle.net/QJsPc/4/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...