javascript - bootstrap - tabs html example

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 lidiaba 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 disparan javascript cuando se hace clic izquierdo o pestañas nuevas cuando se hace clic en el medio? ¿Tiene que ser un JavaScript desagradable que capte todos los clics y los trate en consecuencia?

Gracias.

Answer 1

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

Answer 2

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 después de que tenga el sitio básico funcionando.

Answer 3

Sí. En lugar de:

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

Hacer esto:

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

Y luego en su JS, enganche el enlace a través de su identificación 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 del evento y el evento asesino en jquery:

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

Por supuesto, puede ser mucho más inteligente, al hacer malabares con cosas como esta, pero creo que es importante destacar que este método es mucho más limpio que el uso de atributos onclick .

Mantenga su JS en el JS!

Answer 4

Se requerirán 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.

EDITAR: Me sentí que esto podría usar un ejemplo:

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

Answer 5

Me gustó el enfoque de Oli, pero no discernió entre los clics izquierdo y medio. revisando el campo "which" en eventArgs se 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.
});

Answer 6

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

Answer 7

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

Para obtener más información y explicación detallada, vea mi respuesta en otra publicación .