CODEWITHSUNDEEP
javascript
user2965293
user2965293

Reputation: 45

use e.preventDefault() once for multiple events

In the below code, you can see that I've used e.preventDefault() multiple times as they required.

I'm looking for a way to use e.preventDefault() once but keeping the functionality same as the below code.

Don't tell me to place e.preventDefault() after ctrl as I want to keep other shortcuts working.

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;
  }
});

Finally got this:

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();
  }
});

Upvotes: 2

Views: 264

Answers (2)

HMR
HMR

Reputation: 39270

I have a feeling you may be adding a lot more actions so you could do something like this:

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();
  }
 };  
}()));

For any keykode that needs a closure to be passed like showHideStatusBar and the logic for tab you may consider writing a function for it that takes no parameters as it would simplify the actions object.

Upvotes: 1

CompuChip
CompuChip

Reputation: 9232

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();
   }
});

Upvotes: 2

Related Questions