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

イベントを処理した場合は true を返し、それ以外の場合は false を返す別のメソッドにコードを配置すると、イベント ハンドラーは次のようになります。

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 やタブのロジックなど、クロージャーを渡す必要があるキーコードについては、アクション オブジェクトを簡素化するため、パラメーターをとらない関数を作成することを検討してください。

于 2013-11-10T10:22:02.500 に答える