处理keydown事件中的某些键时,请遵循默认行为

时间:2011-04-22 12:33:05

标签: javascript jquery events

我正在使用jQuery来处理html树上的keydown事件。正如您从代码中看到的那样,我正在处理tab键,以便它遍历树。但如果它到达树的末尾,我希望它从树中跳出并进入下一个可用字段。我试过在这种情况下返回true,但这不起作用。

这也阻止了其他键的运行。例如,我也想让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();
}

修改

我已更新代码以更准确地反映正在发生的事情。现在问题是什么更清楚了。该事件附加到列表项元素,因此当我返回true时,它会继续触发所有祖先,直到它到达根目录。此时,默认行为已停止。解决方案是仅在我知道需要时防止默认行为,而不是将其作为默认行为。

2 个答案:

答案 0 :(得分:3)

您不必返回true告诉浏览器继续处理该事件;这就是你在做preventDefaultreturn false时所做的事情。只需return条款default。 (我希望return true;无害,但嘿,你永远不会知道。)

您的引用代码中有一些错误。我假设您使用了复制并粘贴(为什么要重新键入它?)因此我想知道您遇到的问题是否只是抛出了错误或者逻辑没有做到你期待什么。

特别是

  • 您在obj函数定义的参数部分中遗漏了eonKeyDown之间的逗号,因此这是语法错误。
  • 您正在关闭e.keycode。它应该是e.keyCode(请注意首都C)。如果上面缺少的逗号实际上不在您的代码中,但是e.keycode始终为undefined并且不符合您的任何情况,那么所有内容都将转到default。< / LI>

答案 1 :(得分:0)

对于遇到类似问题的其他人......

您可能希望明确说明哪些情况应该阻止默认行为,而不是将其作为默认情况。

在我的例子中,事件被绑定到列表项元素,这意味着如果允许传播,它将一直向上触发树。未在我的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);
     }