javascript - llamar - onclick

¿Cómo evitar que un clic en un enlace ''#'' salte a la parte superior de la página?

Question

Actualmente estoy usando etiquetas <a> con jQuery para iniciar cosas como eventos de clic, etc.

El ejemplo es <a href="#" class="someclass">Text</a>

Pero odio cómo el ''#'' hace que la página salte a la parte superior de la página. ¿Qué puedo hacer?

Answer 1

Agregar algo después de ''#'' establece el foco de la página para el elemento con esa identificación. La solución más simple es usar ''# /'' incluso si está usando jquery. Sin embargo, si está manejando el evento en jquery, event.preventDefault () es el camino a seguir.

Answer 2

El #/ truco funciona, pero agrega un evento de historial al navegador. Por lo tanto, hacer clic de nuevo no funciona, ya que el usuario puede desear / esperar que lo haga.

$(''body'').click(''a[href="#"]'', function(e) {e.preventDefault() }); es la forma en que fui, ya que funciona para contenido ya existente, y cualquier elemento agregado al DOM después de la carga.

Específicamente, necesitaba hacer esto en un menú desplegable de bootstrap dentro de un .btn-group (Reference) , así que lo hice:

$(''body'').click(''.dropdown-menu li a[href="#"]'', function(e) {e.preventDefault() });

De esta manera fue dirigido, y no afectó a nada más en la página.

Answer 3

En jQuery, cuando maneja el evento click, devuelve falso para evitar que el enlace responda de la manera habitual evite que se lleve a cabo la acción predeterminada, que es visitar el atributo href (según el comentario de PoweRoy y la respuesta de Erik ):

$(''a.someclass'').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

Answer 4

Entonces esto es viejo pero ... solo en caso de que alguien encuentre esto en una búsqueda.

Simplemente use "#/" lugar de "#" y la página no saltará.

Answer 5

He usado:

<a href="javascript://nop/" class="someClass">Text</a>

Answer 6

Los enlaces con href = "#" casi siempre deberían reemplazarse por un elemento de botón:

<button class="someclass">Text</button>

El uso de enlaces con href = "#" también es un problema de accesibilidad, ya que estos enlaces serán visibles para los lectores de pantalla, que leerán "Enlace - Texto", pero si el usuario hace clic no irá a ninguna parte.

Answer 7

Para evitar que la página salte, debe llamar a e.stopPropagation(); después de llamar a e.preventDefault(); :

stopPropagation evita que el evento suba al árbol DOM. Más información aquí: https://api.jquery.com/event.stoppropagation/

Answer 8

Puede pasar una etiqueta delimitadora sin una propiedad href y usar jQuery para realizar la acción requerida:

<a class="foo">bar</a>

Answer 9

Puede usar #0 como href, ya que 0 no está permitido como id, la página no saltará.

<a href="#0" class="someclass">Text</a>

Answer 10

Puede usar event.preventDefault() para evitar esto. Lea más aquí: http://api.jquery.com/event.preventDefault/ .

Answer 11

Si desea migrar a una sección de anclaje en la misma página sin saltar de página, use:

Simplemente use "# /" en lugar de "#", por ejemplo

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

Answer 12

Si desea usar un ancla, puede usar http://api.jquery.com/event.preventDefault/ como las otras respuestas sugeridas.

También puede usar cualquier otro elemento como un tramo y adjuntar el evento click a eso.

$("span.clickable").click(function(){
alert(''Yeah I was clicked'');
});

Answer 13

Si el elemento no tiene un valor href significativo, entonces no es realmente un enlace, entonces ¿por qué no usar algún otro elemento?

Según lo sugerido por Neothor, un tramo es igual de apropiado y, si se diseña correctamente, será visiblemente obvio como un elemento que se puede hacer clic. Incluso podría adjuntar un evento de desplazamiento, para hacer que el elemento ''se ilumine'' cuando el mouse del usuario se mueva sobre él.

Sin embargo, una vez dicho esto, es posible que desee replantear el diseño de su sitio para que funcione sin javascript, pero se mejora mediante javascript cuando esté disponible.

Answer 14

Siempre he usado:

<a href="#?">Some text</a>

al intentar evitar que la página salte. No estoy seguro si esto es lo mejor, pero parece que ha estado funcionando bien durante años.

Answer 15

Simplemente use <input type="button" /> lugar de <a> y use CSS para darle un estilo que parezca un enlace si lo desea.

Los botones están hechos específicamente para hacer clic, y no necesitan ningún atributo href.

La mejor manera es usar la acción de carga para crear el botón y anexarlo donde lo necesite a través de javascript, de modo que con javascript desactivado, no se mostrarán en absoluto y no confundirán al usuario.

Cuando utiliza href="#" , obtiene miles de enlaces diferentes que apuntan a la misma ubicación, lo que no funcionará cuando el agente no admita JavaScript.

Answer 16

Solo usa

<a href="javascript:;" class="someclass">Text</a>

JQUERY

$(''.someclass'').click(function(e) { alert("action here"); }

Answer 17

Solución # 1:

<a href="#!" class="someclass">Text</a>

Solución # 2:

<a href="javascript:void(0);" class="someclass">Text</a>

Solución # 3:

<a href="#" class="someclass">Text</a>
<script>
$(''a.someclass'').click(function(e) {
    e.preventDefault();
});
</script>

Answer 18

También puede devolver falso después de procesar su jquery.

P.ej.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

Answer 19

Yo uso algo como esto:

<a href="#null" class="someclass">Text</a>

Answer 20

incluso puedes escribirlo así:

<a href="javascript:void(0);"></a>

No estoy seguro de que sea una mejor manera, pero es una forma :)

Answer 21

$(''a[href="#"]'').click(function(e) {e.preventDefault(); });