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)

Answer 1

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