Estoy creando una lista de etiquetas de anclaje a partir de una consulta MySQL / PHP; las etiquetas de anclaje llaman a una función de JavaScript.

El 'catch 22' que tengo es:

  • href = "#" hace que la página salte a la parte superior cada vez que se hace clic en una de las etiquetas de anclaje (muy molesto)
  • remove href = "#" significa que el cursor no cambia a medida que se desplaza una etiqueta de anclaje ni esa etiqueta de anclaje tiene la apariencia de una etiqueta de anclaje.

Sé que hay una manera de manejar esto con JavaScript (posiblemente jQuery) pero no recuerdo cómo en este momento. Sin embargo, realmente prefiero una corrección HTML más simple (si existe) que no requiere que ingrese a JavaScript.

Editar: "no requiere que acceda a JavaScript" == "no requiere cambios extensivos en JavaScript".

6
John R 27 jun. 2011 a las 19:24

5 respuestas

La mejor respuesta

Una solución HTML más simple para usted: en lo personal, para enlaces de prueba simples solo uso href=""

Para los enlaces que apuntan a una función de JavaScript, tiendo a utilizar href="javascript:;". De cualquier manera, detendrá el salto de página.

2
Scott Brown 27 jun. 2011 a las 15:44

Devuelve falso después de onclick o desde dentro de la función foo ().

1
ek_ny 27 jun. 2011 a las 15:26
<html>
    <head>

    </head>
    <body>
    <style>
    a {
        text-decoration: underline;
    }
    a:hover {
        text-decoration: underline;
    }
    </style>
    <script type="text/javascript">
      function foo() {
        alert('Hello World');
      }
    </script>
    <a onclick="foo();">Click Here</a>
    </body>
    </html>

Simplemente agregar CSS y eliminar href parece estar bien.

0
John 27 jun. 2011 a las 15:56

Debe llamar a event.preventDefault(); en algún lugar del controlador de eventos de clic. En JavaScript vainilla, esto se puede hacer así:

<script type="text/javascript">
  function foo(e) {
    e.preventDefault();
    // other code
  }
</script>
<a href="#" onclick="foo(e);"></a>

Además, también puede devolver falso:

<a href="#" onclick="foo();return false;/>

Esto también se puede hacer en jQuery simplemente:

$('.mylink').click(function(e) {
  e.preventDefault();
  // other code
});

La desventaja de usar return false; es que también evita que el evento haga burbujear el DOM. Si no le importa el burbujeo de eventos, está bien usar falso, pero personalmente creo que es mejor usar event.preventDefault(); a menos que también desee detener específicamente el burbujeo de eventos.

1
scurker 27 jun. 2011 a las 15:34

En su función de javascript debe return false, o con jquery puede usar preventDefault()

Ejemplo:

$('a').click(function(event) {
    event.preventDefault();
    // do something
});

O en tu caso:

<a href=“#” onclick="foo();return false;">

O cambie el href a javascript:void(0):

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

Idealmente, su enlace se degrada sin javascript, por lo que generalmente se evitará la tercera opción.

4
Wesley Murch 27 jun. 2011 a las 15:31