CODEWITHSUNDEEP
jquerykeyboardclickmousedetection
Andres SK
Andres SK

Reputation: 10974

jQuery: detecting cmd+click / control+click

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:

Upvotes: 20

Views: 18061

Answers (5)

Rahul Gandhi
Rahul Gandhi

Reputation: 1095

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

Upvotes: 8

Nish
Nish

Reputation: 153

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

Upvotes: 4

Leighton Wallace
Leighton Wallace

Reputation: 441

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

Upvotes: 39

Aru S
Aru S

Reputation: 1529

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

Upvotes: 24

JP Silvashy
JP Silvashy

Reputation: 48475

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.

Upvotes: 1

Related Questions