jquery - detectar - keypress enter javascript

jQuery: detección de cmd+clic/control+clic

Question

Tengo las opciones de mi aplicación web en pestañas.

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

Cuando el usuario hace clic en cualquier pestaña (en la misma ventana), se produce un efecto de atenuación que obtengo con este código, y luego se realiza una redirección automática:

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

Funciona muy bien, ya que ignora el clic central del mouse (al abrir la opción en una nueva pestaña, el efecto no debe activarse). El problema es que, si abro la pestaña con una combinación de teclado y mouse, en lugar de abrir una nueva pestaña, se activa todo el código de efecto / redirección.

Entonces, ¿cómo puedo detectar esto con jQuery:

• cmd + clic izquierdo del ratón (mac)
• control + clic izquierdo del ratón (windows / linux)

Answer 1

Desafortunadamente, event.metaKey no se evalúa como verdadero en Windows cuando se mantiene presionada la tecla ctrl.

Afortunadamente, event.ctrlKey se evalúa como verdadero en estas situaciones. Además, es posible que desee considerar la opción de hacer clic en Mayús + clics en el controlador de eventos.

Por lo tanto, su código javascript con sabor a jquery multiplataforma se vería como:

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

Answer 2

El uso de e.metaKey no funciona igual en Windows, por lo que para detectar Windows puede usar el objeto del navegador y ver si el usuario está haciendo clic en la tecla de control (la forma predeterminada de abrir una nueva pestaña).

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

Answer 3

En su función de clic, ¿e.metaKey se evalúa como verdadero? Si es así, ahí estás.

Answer 4

Sé que quieres usar jQuery, pero le daría una oportunidad a Keymaster:

https://github.com/madrobby/keymaster

Es realmente genial, lo estoy usando para un proyecto en el que estoy trabajando y es genial.

Answer 5

Según MDN, event.metaKey devuelve true para la tecla de comando en los teclados de Mac y devuelve true para las teclas de Windows en los teclados de Windows.

Por lo tanto, también debe verificar la propiedad ctrlKey para detectar la clave de control.

if (event.ctrlKey || event.metaKey) {
    //ctrlKey to detect ctrl + click
    //metaKey to detect command + click on MacOS
    yourCommandKeyFunction();
} else {
    yourNormalFunction();
}