jQuery: detecting cmd+click / control+click

Question

i have the options of my web application in tabs.

<ul id="tabs">
    <li><a href="a.php">aaa</a></li>
    <li><a href="b.php">bbb</a></li>
    <li><a href="c.php">ccc</a></li>
    <li><a href="d.php">ddd</a></li>
    <li><a href="e.php">eee</a></li>
</ul>

When the user clicks on any tab (in the same window) there is a fadeout effect which i get with this code, and afterwards an automatic redirection:

$('ul#tabs li a').click(function(e){
    if(e.which == 1) {
        var link = $(this).attr('href');
        $('#content').fadeOut('fast',function(){
            window.location = link;
        });
    }
});

It works great, because it ignores the mouse middle click (when opening the option in a new tab, the effect should not be triggered). The problem is that, if i open the tab with a keyboard+mouse combination, instead of opening a new tab, it triggers the whole effect/redirect code.

So, how can i detect this with jQuery:

• cmd + mouse left click (mac)
• control + mouse left click (windows/linux)

Solution 1

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

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

Solution 3

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

Solution 4

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

Solution 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.

View more solutions

Comments

[Andres SK]

hi, i am using Keymaster for other functionalities, as i read it does not work with mouse events.

[JKS]

According to MDN, metaKey refers to the Windows key on Windows – not the control key.

[floribon]

Great answer, although shift was not part of the question.

[Throttlehead]

Shift seems like overkill but this did the trick on mac and windows