2

在下面的代码中，您可以看到我已e.preventDefault()根据需要多次使用。

我正在寻找一种使用e.preventDefault()一次但功能与以下代码相同的方法。

不要告诉我放在e.preventDefault()后面ctrl，因为我想让其他快捷方式继续工作。

document.addEventListener("keydown", function(e) { // shortcuts
  if (e.ctrlKey) { // Ctrl+
    switch (e.keyCode) {
      case 82: // R
        e.preventDefault();
        newDoc();
        break;
      case 79: // O
        e.preventDefault();
        openDoc();
        break;
      case 83: // S
        e.preventDefault();
        saveDoc();
        break;
      case 66: // B
        e.preventDefault();
        showHideStatusBar(statusBarOn ? false : true); // toggle
        break;
      case 191: // /
        e.preventDefault();
        alert("Welcome to " + appname + "!");
        break;
    }
  }
  if (e.keyCode == 9) { // tab
    e.preventDefault();
    var sStart = textarea.selectionStart,
      text = textarea.value;
    textarea.value = text.substring(0, sStart) + "\t" + text.substring(textarea.selectionEnd);
    textarea.selectionEnd = sStart + 1;
  }
});

终于得到了这个：

document.addEventListener("keydown", function(e) { // shortcuts
  var key = {
    "noctrl9": function() { // tab
      var sStart = textarea.selectionStart,
        text = textarea.value;
      textarea.value = text.substring(0, sStart) + "\t" + text.substring(textarea.selectionEnd);
      textarea.selectionEnd = sStart + 1;
    },
    66: function() { // B
      showHideStatusBar(statusBarOn ? false : true); // toggle
    },
    79: openDoc, // O
    82: newDoc, // R
    83: saveDoc, // S
    191: function() { // /
      alert("Welcome to " + appname + "!");
    }
  }, fn = e.ctrlKey ? key[e.keyCode] : key["noctrl" + e.keyCode];
  if (fn) {
    e.preventDefault();
    fn();
  }
});
4

2 回答 2

2

You could put the code in a separate method that returns true if it handled the event and false otherwise, then your event handler would look like

document.addEventListener("keydown", function(e) { // shortcuts
   if (processShortcut(e))
   {
       e.preventDefault();
   }
});
于 2013-11-10T09:53:08.870 回答
1

我感觉您可能会添加更多操作，因此您可以执行以下操作：

document.addEventListener("keydown", (function() { // shortcuts
  //return a closure that has actions in it's scope
  var actions={
    "82":{fn:newDoc},
    "79":{fn:openDoc},
    "83":{fn:saveDoc},
    "66":{fn:function(){
      //a closure here isn't needed if showHideStatusBar
      //  would check out the value of statusBarOn
      showHideStatusBar(statusBarOn ? false : true);
    }},
    "191":{fn:function(){
      alert("Welcome to " + appname + "!");
    }},
    "noctrl9":{fn:function(){
      //var sStart = ....
      //  maybe this code is a good candidate to be put
      //  in it's own function as well
    }}
  };
  return function(e){
   if ((e.ctrlKey && actions[e.keyCode])
    || actions["noctrl"+e.keyCode]) {
      e.preventDefault();
      actions[keyCode].fn();
  }
 };  
}()));

对于任何需要像 showHideStatusBar 一样传递闭包的 keykode 和 tab 的逻辑，您可以考虑为它编写一个不带参数的函数，因为它会简化操作对象。

于 2013-11-10T10:22:02.500 回答