medio clic (nuevas pestañas) y enlaces de Javascript

Question

Estoy a cargo de un sitio web en el trabajo y recientemente he agregado solicitudes ajaxy para que sea más rápido y más receptivo. Pero ha planteado un problema.

En mis páginas, hay una tabla de índice a la izquierda, como un menú. Una vez que ha hecho clic en él, realiza una solicitud que llena el resto de la página. En cualquier momento, puede hacer clic en otro elemento del índice para cargar una página diferente.

Antes de agregar javascript, era posible hacer clic medio (abrir pestañas nuevas) para cada elemento del índice, lo que permitía que otras páginas se cargaran mientras yo estaba tratando con una de ellas. Pero como he cambiado todos los enlaces para que sean solicitudes ajax, ahora ejecutan algunos javascript en lugar de ser enlaces reales. Entonces solo abren pestañas vacías cuando hago clic en ellas.

¿Hay alguna manera de combinar ambas funcionalidades: enlaces que ejecutan javascript cuando se hace clic izquierdo o pestañas nuevas cuando se hace clic en el medio? Tiene que ser un javascript feo que capte todos los clics y trate con ellos en consecuencia?

Gracias.

Answer 1

Posiblemente, podría proporcionar dos enlaces cada vez, uno disparando el javascript y otro siendo un enlace real que permitiría un clic medio. Supongo, uno de ellos debería ser una imagen para evitar sobrecargar el índice.

Answer 2

Requerirá algunas pruebas, pero creo que la mayoría de los navegadores no ejecutan el controlador de clics al hacer clic en ellos, lo que significa que solo se utiliza el enlace.

Sin embargo, no es necesario que su función de controlador devuelva falso para garantizar que estos enlaces no se utilicen cuando se hace clic normalmente.

EDIT: fieltro esto podría usar un ejemplo:

<a href="/Whatever/Wherever.htm" onclick="handler(); return false;" /> 

Answer 3

Sí. En lugar de:

<a href="javascript:code">...</a> 

Haga lo siguiente:

<a href="/non/ajax/display/page" id="thisLink">...</a> 

Y luego, en sus JS, enganche el enlace a través de su ID para hacer la llamada AJAX. Recuerda que debes evitar que el evento de clics burbujee. La mayoría de los frameworks tienen incorporado un asesino de eventos al que puedes llamar (solo mira su clase Event).

Aquí está el manejo de eventos y eventos causa de muerte en jQuery:

$("#thisLink").click(function(ev, ob) { 
    alert("thisLink was clicked"); 
    ev.stopPropagation(); 
}); 

Por supuesto, puede ser mucho más inteligente, mientras que las cosas malabares como este, pero creo que es importante hacer hincapié en que este método es por lo mucho más limpio que con los atributos onclick.

Mantenga su JS en el JS!

Answer 4

El evento onclick no se activará para ese tipo de clic, por lo que debe agregar un atributo href que realmente funcionaría. Una forma posible de hacerlo es agregando un #bookmark a la URL para indicar a la página de destino cuál es el estado requerido.

Answer 5

Sí, necesita buscar mejoras progresivas y Javascript discreto, y codificar su sitio para que funcione sin Javascript habilitado primero y luego agregar las funciones de Javascripts luego de que el sitio básico esté funcionando.

Answer 6

<a href="/original/url" onclick="return !doSomething();">link text</a> 

Para obtener más información y una vista detallada explicación my answer in another post.

Answer 7

Me gustó el enfoque de Oli, pero no discernió entre los clics izquierdo y medio. verificando el campo "which" en eventArgs te lo hará saber.

$(".detailLink").click(function (ev, ob) { 
    //ev.which == 1 == left 
    //ev.which == 2 == middle 
    if (ev.which == 1) { 
     //do ajaxy stuff 

     return false; //tells browser to stop processing the event 
    } 
    //else just let it go on its merry way and open the new tab. 
});