javascript - tablas - que significa enlace opcional

¿Cómo detectar si el usuario está intentando abrir un enlace en una nueva pestaña?

Question

Estoy escribiendo un sitio web en el que todo el contenido se almacena en el entorno de JavaScript, por lo que debería ser posible navegar entre "páginas" sin solicitudes HTTP adicionales.

Sin embargo, quiero preservar la intención del usuario con respecto a cómo se abren los enlaces. Si un usuario de Mac, Apple + hace clic en un enlace, por ejemplo, debería abrirse en una nueva pestaña. Pero si el usuario desea abrir un enlace en la ventana actual, quiero evitar hacer una nueva solicitud HTTP y simplemente usar la manipulación DOM para mostrar el nuevo contenido.

Esto es lo que probé ( JSFiddle ):

<a href="http://yahoo.com" id="mylink">Yahoo!</a>

document.getElementById("mylink").onclick = function() {
    alert("clicked");
    return false;
}

Se comporta como se desea para clics de la izquierda normales y para acciones del menú contextual, pero no para clics con una tecla modificadora. Podría comprobar si se mantienen ciertas teclas modificadoras, pero eso parece frágil.

El sitio web de Twitter tiene un comportamiento similar al que quiero: cuando hace clic en un nombre de usuario, normalmente es una solicitud de AJAX, pero si hace clic con una tecla meta mantenida, obtiene una nueva pestaña.

Preferiría una solución JavaScript simple sin bibliotecas, a menos que esto requiera un montón de lógica específica de la plataforma.

Actualizar

Eché un vistazo al código de GitHub, que también tiene el comportamiento que busco, y comprueba si se mantienen ciertas teclas. Entonces, estoy aceptando la respuesta de Chris, ya que parece poco probable que haya una alternativa mejor.

$(document).on("click", ".js-directory-link", function (t) {
    return 2 === t.which || t.metaKey || t.ctrlKey ? void 0 : ($(this).closest("tr").addClass("is-loading"), $(document.body).addClass("disables-context-loader"))
}

Answer 1

Puede examinar las ctrlKey , shiftKey y metaKey del objeto de evento. Si cualquiera de los dos es verdadero, la tecla de control de teclas, shift o meta (comando de Apple) se mantiene y debe permitir que la acción de enlace predeterminada continúe. De lo contrario, utiliza preventDefault para detener la acción de enlace y manejarla con javascript en su lugar.

Agregue target="_blank" a su marca de anclaje, por lo que el comportamiento del enlace predeterminado es abrir una nueva pestaña. De lo contrario, se abrirá en la parte superior de la página actual (que puede desearse).

Aquí está el javascript, de cualquier manera:

document.getElementById("mylink").onclick = function(evnt) {
    if (
        evnt.ctrlKey || 
        evnt.shiftKey || 
        evnt.metaKey || // apple
        (evnt.button && evnt.button == 1) // middle click, >IE9 + everyone else
    ){
        return;
    }
    evnt.preventDefault();

    alert("clicked");
    return false;
}

Fiddle: http://jsfiddle.net/6byrt0wu/

Documentación

• Eventos de MDN - https://developer.mozilla.org/en-US/docs/Web/API/Event
• Event.ctrlKey - https://developer.mozilla.org/en-US/docs/Web/API/event.ctrlKey
• Event.shiftKey - https://developer.mozilla.org/en-US/docs/Web/API/event.shiftKey
• Event.metaKey - https://developer.mozilla.org/en-US/docs/Web/API/event.metaKey
• a etiqueta - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a