jQuery: detecting cmd+click / control+click

Question

i have the options of my web application in tabs.

    
aaa
    


        

Answer 1

In your click function, does e.metaKey evaluate to true? If so, there you are.

Answer 2

Unfortunately, event.metaKey does not evaluate to true on Windows when the ctrl key is held on click.

Fortunately, event.ctrlKey does evaluate to true in these situations. Also, you may want to consider shift + clicks in your event handler.

Thus, your cross platform jquery flavored javascript code would look something like:

$('ul#tabs li a').on('click', function(e) {
    var link = $(this).attr('href');

    // Check "open in new window/tab" key modifiers
    if (e.shiftKey || e.ctrlKey || e.metaKey) {
      window.open(link, '_blank');
    } else {
      $('#content').fadeOut('fast',function(){
        window.location = link;
      });
    }
  }
});

Answer 3

Using e.metaKey doesn't works the same on windows, so to detect for Windows you can use the navigator object and see if the user is clicking the ctrl key (the default way to open a new tab).

$('ul#tabs li a').click(function(a){
  var href = $(this).attr('href');
  // check if user clicked with command key (for mac) or ctrl key (for windows)
  if(a.metaKey || (navigator.platform.toUpperCase().indexOf('WIN')!==-1 && a.ctrlKey)) {
    window.open(href,'_blank');
  } else {
    $('#content').fadeOut('fast', function(){
        window.location = href;
    });
  }
});

Answer 4

According to MDN, the event.metaKey returns true for the command key on Mac keyboards and returns true for windows keys on the Windows keyboards.

So, you should also check the ctrlKey property to detect the control key.

if (event.ctrlKey || event.metaKey) {
    //ctrlKey to detect ctrl + click
    //metaKey to detect command + click on MacOS
    yourCommandKeyFunction();
} else {
    yourNormalFunction();
}

Answer 5

I know you want to use jQuery, but I would give Keymaster a try:

https://github.com/madrobby/keymaster

It's really great, I'm using it for a project I'm working on and it's great.