Quiero ejecutar una función de JavaScript simple con un clic sin ninguna redirección.

¿Hay alguna diferencia o beneficio entre poner la llamada de JavaScript en el hrefatributo (como este:

<a href="javascript:my_function();window.print();">....</a>

) vs. ponerlo en el onclickatributo (vincularlo al onclickevento)?

Poner el onclick dentro del href ofendería a aquellos que creen firmemente en la separación del contenido del comportamiento / acción. El argumento es que su contenido html debe permanecer enfocado únicamente en el contenido, no en la presentación o el comportamiento.

La ruta típica en estos días es usar una biblioteca javascript (por ejemplo, jquery) y crear un controlador de eventos usando esa biblioteca. Se vería algo así como:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

malo:

<a id="myLink" href="javascript:MyFunction();">link text</a>

bueno:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

mejor:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

aún mejor 1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

aún mejor 2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

¿Por qué mejor? porque return falseevitará que el navegador siga el enlace

mejor:

Use jQuery u otro marco similar para adjuntar el controlador onclick por ID de elemento.

$('#myLink').click(function(){ MyFunction(); return false; });

En términos de javascript , una diferencia es que la thispalabra clave en el onclickcontrolador se referirá al elemento DOM cuyo onclickatributo es (en este caso, el <a>elemento), mientras que thisen el hrefatributo se referirá awindow objeto.

En términos de presentación , si un hrefatributo está ausente de un enlace (es decir <a onclick="[...]">), por defecto, los navegadores mostrarán el textcursor (y no el pointercursor deseado a menudo ) ya que está tratando el<a> como un ancla, y no como un enlace.

En términos de comportamiento , al especificar una acción mediante la navegación a través de href, el navegador normalmente admitirá abrirla hrefen una ventana separada utilizando un acceso directo o un menú contextual. Esto no es posible cuando se especifica una acción solo a través de onclick.

Sin embargo, si está preguntando cuál es la mejor manera de obtener una acción dinámica con el clic de un objeto DOM, entonces adjuntar un evento usando javascript separado del contenido del documento es la mejor manera de hacerlo. Podrías hacer esto de varias maneras. Una forma común es usar una biblioteca javascript como jQuery para vincular un evento:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>

yo suelo

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

Un largo camino pero hace el trabajo. usa un estilo A para simplificar y luego se convierte en:

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>

Además de todo lo aquí, el href se muestra en la barra de estado del navegador, y no haga clic en. Creo que no es fácil de usar mostrar código JavaScript allí.

La mejor manera de hacerlo es con:

<a href="#" onclick="someFunction(e)"></a>

El problema es que esto agregará un hash (#) al final de la URL de la página en el navegador, lo que requiere que el usuario haga clic en el botón Atrás dos veces para ir a la página anterior a la suya. Teniendo esto en cuenta, debe agregar algo de código para detener la propagación de eventos. La mayoría de los kits de herramientas de JavaScript ya tendrán una función para esto. Por ejemplo, el kit de herramientas dojo usa

dojo.stopEvent(event);

para hacerlo

La respuesta principal es una muy mala práctica, nunca se debe vincular a un hash vacío, ya que puede crear problemas en el futuro.

Sin embargo, lo mejor es vincular un controlador de eventos al elemento como lo han declarado muchas otras personas, <a href="javascript:doStuff();">do stuff</a> funciona perfectamente en todos los navegadores modernos, y lo uso ampliamente cuando renderizo plantillas para evitar tener que volver a vincular para cada instancia. En algunos casos, este enfoque ofrece un mejor rendimiento. YMMV

Otro tid-bit interesante ...

onclick& hreftener comportamientos diferentes al llamar a JavaScript directamente.

onclickpasará el thiscontexto correctamente, mientras hrefque no lo hará, o en otras palabras <a href="javascript:doStuff(this)">no context</a>, no funcionará, mientras que<a onclick="javascript:doStuff(this)">no context</a> hará.

Sí, omití el href. Si bien eso no sigue las especificaciones, funcionará en todos los navegadores, aunque, idealmente, debería incluir una href="javascript:void(0);"buena medida

Teniendo javascript: un atributo que no sea específicamente para secuencias de comandos es un método obsoleto de HTML. Si bien técnicamente funciona, todavía está asignando propiedades de JavaScript a un atributo que no es un script, lo cual no es una buena práctica. Incluso puede fallar en los navegadores antiguos, o incluso en algunos modernos (una publicación en el foro de Google parece indicar que a Opera no le gustan las URL 'javascript:').

Una mejor práctica sería la segunda forma, poner su javascript en el onclickatributo, que se ignora si no hay funcionalidad de scripting disponible. Coloque una URL válida en el campo href (comúnmente '#') para los que no tienen javascript.

funcionó para mí usando esta línea de código:

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>

Esto funciona

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

Personalmente, encuentro molesto poner llamadas de JavaScript en la etiqueta HREF. Por lo general, realmente no presto atención a si algo es o no un enlace de JavaScript o no, y muchas veces quiero abrir cosas en una nueva ventana. Cuando trato de hacer esto con uno de estos tipos de enlaces, aparece una página en blanco sin nada y JavaScript en mi barra de ubicación. Sin embargo, esto se evita un poco al usar un onlick.

Una cosa más que noté al usar "href" con javascript:

El script en el atributo "href" no se ejecutará si la diferencia de tiempo entre 2 clics fue bastante corta.

Por ejemplo, intente ejecutar el siguiente ejemplo y haga doble clic (¡rápido!) En cada enlace. El primer enlace se ejecutará solo una vez. El segundo enlace se ejecutará dos veces.

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

Reproducido en Chrome (doble clic) e IE11 (con triple clic). En Chrome, si hace clic lo suficientemente rápido, puede hacer 10 clics y tener solo 1 función de ejecución.

Firefox funciona bien.

Primero, tener la URL hrefes mejor porque permite a los usuarios copiar enlaces, abrirlos en otra pestaña, etc.

En algunos casos (por ejemplo, sitios con cambios frecuentes de HTML) no es práctico vincular enlaces cada vez que hay una actualización.

Método de enlace típico

Enlace normal:

<a href="https://www.google.com/">Google<a/>

Y algo así para JS:

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

Los beneficios de este método son la separación limpia de marcado y comportamiento y no tiene que repetir las llamadas a funciones en cada enlace.

Método sin enlace

Sin embargo, si no desea vincular cada vez, puede usar onclick y pasar el elemento y el evento, por ejemplo:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

Y esto para JS:

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

El beneficio de este método es que puede cargar nuevos enlaces (por ejemplo, a través de AJAX) siempre que lo desee sin tener que preocuparse por el enlace cada vez.

 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>   

Experimenté que el javascript: hrefs no funcionaba cuando la página estaba incrustada en la función de página web de Outlook donde una carpeta de correo está configurada para mostrar una url