jQuery: detecting cmd+click / control+click

20
votes

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)
5
jquerykeyboardclickmousedetection
There's a small module that filters out those events automatically. filter-altered-clicks. Just wrap your listener function with it and you don't have to manually check for every key in your listener. – fregante

5 Answers

38
votes

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

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

6
votes

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.

enter image description here

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

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

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.