Etiqueta de anclaje HTML con evento onclick de Javascript

86

Al usar Google, descubrí que están usando eventos onclick en etiquetas de anclaje.

En más opciones en la parte del encabezado de Google, parece una etiqueta normal, pero al hacer clic en ella no se redirige sino que se abre un menú. Normalmente cuando se usa

<a href='more.php' onclick='show_more_menu()'>More >>></a>

Por lo general, va a 'more.php' sin disparar show_more_menu(), pero he mostrado un menú en esa página. ¿Cómo hacer Me gusta en Google ?

— chico listo
fuente

117

Si su función onclick devuelve falso, el comportamiento predeterminado del navegador se cancela. Como tal:

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

De cualquier manera, si Google lo hace o no, no tiene mucha importancia. Es más limpio vincular sus funciones onclick dentro de javascript; de esta manera, separa su HTML de otro código.

— TJHeuvel
fuente

3

1. Para estar más seguro, use un # en href = "#" y haga las cosas necesarias dentro del javascript. Es seguro hacer clic en ese enlace con # href; la página deja / recarga la URL.

— Bimal Poudel

4

Siga los consejos anteriores con precaución, ya que las reglas de HTML5 establecen explícitamente que href="#"se supone que debe navegar hasta la parte superior de la página. Simplemente puede agregar el hrefatributo sin contenido y obtener el comportamiento del clic. Evaluar #como URL para páginas reales (en lugar de aplicaciones de una sola página al 100% de altura) es generalmente una mala idea.

— Mike 'Pomax' Kamermans

54

Incluso puedes probar la siguiente opción:

<a href="javascript:show_more_menu();">More >>></a>

— sun2
fuente

1

Advertencia: Si la función devuelve cualquier valor explícito (por ejemplo:, return null;pero no return;), esto tendrá consecuencias no deseadas en algunos navegadores, como FireFox. La página tendrá todo el contenido reemplazado con el valor devuelto en formato de cadena (por ejemplo:) [object Object].

— rannmann

45

Por lo que tengo entendido, no desea redirigir cuando se hace clic en el enlace. Tu puedes hacer :

<a href='javascript:;' onclick='show_more_menu();'>More ></a>

— Aditya Manohar
fuente

3

Esto es útil cuando no desea que el href apunte a ninguna parte.

— kbpontius

Es genial y funciona, pero jquery arroja un error "Error: error de sintaxis, expresión no reconocida: javascript :;"

— TheOddCoder

Estoy usando jQuery versión 1.10.2 y no obtengo el error de sintaxis que experimentó @TheOddCoder.

— Mike Finch

1

Use el siguiente código para mostrar el menú en lugar de ir a la dirección href

function show_more_menu(e) {
  if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}

<a href='more.php' onclick="show_more_menu(event)"> More >>> </a>

Expandir fragmento

— Kamil Kiełczewski
fuente