jQuery: обнаружение cmd + щелчок / контроль + щелчок - PullRequest
Новая
       35

jQuery: обнаружение cmd + щелчок / контроль + щелчок

19 голосов
/ 31 августа 2011

У меня есть опции моего веб-приложения на вкладках. 

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

Когда пользователь нажимает на любую вкладку (в том же окне), появляется эффект затухания, который я получаю с этим кодом, а затем автоматическое перенаправление: 

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

Отлично работает, потому что игнорирует средний щелчок мыши (при открытии опции на новой вкладке эффект не должен срабатывать). Проблема в том, что, если я открываю вкладку комбинацией клавиатура + мышь, вместо открытия новой вкладки, она запускает весь код эффекта / перенаправления.

Итак, как я могу обнаружить это с помощью jQuery:

  • cmd + щелчок левой кнопкой мыши (mac)
  • элемент управления + щелчок левой кнопкой мыши (Windows / Linux)

Ответы [ 5 ]

32 голосов
/ 18 сентября 2014

К сожалению, event.metaKey не оценивается как true в Windows, когда удерживается нажатой клавиша Ctrl.

К счастью, event.ctrlKey оценивает истину в этих ситуациях. Кроме того, вы можете рассмотреть возможность нажатия клавиши Shift + в обработчике событий.

Таким образом, ваш кроссплатформенный код javascript со вкусом jquery будет выглядеть примерно так: 

$('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;
      });
    }
  }
});
21 голосов
/ 31 августа 2011

В вашей функции щелчка e.metaKey оценивается как true? Если это так, то вы здесь.

3 голосов
/ 02 июля 2018

Согласно MDN, event.metaKey возвращает true для командной клавиши на клавиатурах Mac и возвращает true для клавиш Windows на клавиатурах Windows.

enter image description here

Итак, вам также следует проверить свойство ctrlKey, чтобы определить управляющий ключ. 

if (event.ctrlKey || event.metaKey) {
    //ctrlKey to detect ctrl + click
    //metaKey to detect command + click on MacOS
    yourCommandKeyFunction();
} else {
    yourNormalFunction();
}
3 голосов
/ 13 ноября 2014

Использование e.metaKey не работает аналогично в Windows, поэтому для обнаружения в Windows вы можете использовать объект навигатора и посмотреть, нажимает ли пользователь клавишу ctrl (способ открытия новой вкладки по умолчанию). 

$('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 голос
/ 31 августа 2011

Я знаю, что вы хотите использовать jQuery, но я бы дал Keymaster попытку:

https://github.com/madrobby/keymaster

Это действительно здорово, я использую его для проекта, над которым я работаюи это здорово.

...