Относиться к поведению по умолчанию при обработке определенных ключей в событии keydown

Question

Я использую jQuery для обработки события keydown в html-дереве. Как видно из кода, я работаю с клавишей табуляции, чтобы она проходила по дереву. Но если он дойдет до конца дерева, я бы хотел, чтобы он вышел из дерева и в следующее доступное поле. Я пытался вернуть истину в этом случае, но это не работает.

Это также препятствует функционированию других клавиш. Например, я также хотел бы, чтобы работали CTRL + R, но он ничего не делает, когда я сосредоточен на дереве.

Я возвращаюсь до вызова e.stopPropagation() и e.preventDefault(), поэтому я ожидаю, что мое событие будет обнаружено обработчиками браузера по умолчанию, но это не так. Я читал в других постах, что нет способа принудительно установить поведение по умолчанию, поэтому я думаю, что лучше всего было бы просто прекратить обработку события и передать его, но оно не передается. Кто-нибудь знает почему?

$(treeItem).keydown(function(e) {
  return onKeyDown(obj, e);
});

var onKeyDown = function(obj, e) {
  if (!obj.isRoot) {
    switch (e.keyCode) {
      case keyCode.LEFT: collapseNode(obj); break;
      case keyCode.RIGHT: expandNode(obj); break;
      case keyCode.UP: stepUpTree(obj); break;
      case keyCode.DOWN: stepDownTree(obj); break;
      case keyCode.TAB: if (e.shiftKey) stepUpTree(obj); else stepDownTree(obj); break;
      case keyCode.ENTER: me.activateNode(obj); break;
      default: return true;
    }
  }

  e.stopPropagation();
  e.preventDefault();
}

EDIT

Я обновил код, чтобы более точно отражать происходящее. Теперь стало понятнее, в чем проблема. Событие присоединяется к элементу элемента списка, поэтому, когда я возвращаю true, оно продолжает работать со всеми предками, пока не доберется до корня. В этот момент поведение по умолчанию остановлено. Решение состоит в том, чтобы предотвратить поведение по умолчанию только тогда, когда я знаю, что нужно, вместо того, чтобы делать его поведением по умолчанию.

Answer 1

Вам не нужно возвращать true, чтобы указать браузеру продолжать обработку события; это то, что он будет делать, если вы не делаете preventDefault или return false. Просто return в вашем предложении default. (Я бы ожидал, что return true; будет безвредным, но эй, вы никогда не знаете.)

В указанном вами коде есть пара ошибок. Я предполагаю, что вы использовали копирование и вставку (зачем вам его печатать заново?) и поэтому мне интересно, возникают ли у вас проблемы только из-за ошибок или логика не совсем так вы ожидаете.

В частности

• Вам не хватает запятой между obj и e в части аргументов определения функции onKeyDown, так что это синтаксическая ошибка.
• Вы выключаете e.keycode. Это должно быть e.keyCode (обратите внимание на заглавную C). Если отсутствующая запятая на самом деле отсутствует в вашем коде, но это так, e.keycode всегда будет undefined и не будет соответствовать ни одному из ваших случаев, поэтому все перейдет к default.

Answer 2

Для тех, кто сталкивается с подобной проблемой ...

Вы можете явно указать, какие случаи должны препятствовать поведению по умолчанию, вместо того, чтобы делать это делом по умолчанию.

В моем случае событие было связано с элементом элемента списка, что означает, что если распространение разрешено, оно будет запускаться до самого дерева. Коды клавиш, которые не были перечислены в моем операторе switch, просто возвращали бы true и распространялись вверх по дереву, пока не добрались до корня. Тогда он пропустит оператор switch и будет вызван preventDefault().

Другими словами ...

     var onTreeItemKeyDown = function (obj, event) {
         if (obj.id() !== me.treeDataManager.getRootItemId()) {
             switch (event.keyCode) {
                 case keyCode.LEFT: collapseNode(obj, event); break;
                 case keyCode.RIGHT: expandNode(obj, event); break;
                 case keyCode.UP: getPreviousItem(obj); haltEvent(event); break;
                 case keyCode.DOWN: getNextItem(obj); haltEvent(event); break;
                 case keyCode.ENTER: if (options.activateContent) { options.activateContent(obj); haltEvent(event); } break;
                 default: return true;
             }
         }

         return true;
     }

     var haltEvent = function (event) {
         event.stopPropagation();
         event.preventDefault();
     }

     var expandNode = function (obj, event) {
         obj.isExpanded(true);
         options.selectNode(obj);
         haltEvent(event);
     }

     var collapseNode = function (obj, event) {
         obj.isExpanded(false);
         options.selectNode(obj);
         haltEvent(event);
     }