Función de JavaScript en href vs onclick

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 false evitará que el navegador siga el enlace

Mejor:

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

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

En términos de javascript, una diferencia es que la palabra clave this en el controlador onclick se referirá al elemento DOM cuyo atributo onclick es (en este caso el elemento <a>), mientras que this en el atributo href se referirá al objeto window.

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

En términos de comportamiento , cuando se especifica una acción de navegación a través de href, el navegador normalmente admite la apertura de href en 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 usted está preguntando cuál es la mejor manera de obtener acción dinámica desde el clic de un objeto DOM, a continuación, adjuntar un evento utilizando javascript separado de la el contenido del documento es la mejor manera de hacerlo. Usted podría hacer esto de varias maneras. Una forma común es usar una biblioteca javascript como jQuery para enlazar 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>

Utilizo

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

Un largo camino alrededor, pero hace el trabajo. utilice un estilo A para simplificar entonces se convierte en:

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

La mejor manera de hacer esto 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 en cuenta esto, es necesario añadir un poco de código para detener la propagación de eventos. La mayoría de los toolkits de javascript ya tendrán una función para esto. Por ejemplo, el dojo toolkit utiliza

dojo.stopEvent(event);

Para hacerlo.

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

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

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

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

Una mejor práctica sería la segunda manera, para poner su javascript en el atributo onclick, que es ignorado si no hay funcionalidad de scripting disponible. Coloque una URL válida en el campo href (comúnmente'#') como alternativa para aquellos que no tienen javascript.

Personalmente, encuentro molesto poner llamadas javascript en la etiqueta HREF. Normalmente no presto atención a si algo es un enlace javascript o no, y muchas veces quiero abrir las cosas en una nueva ventana. Cuando intento hacer esto con uno de estos tipos de enlaces, obtengo una página en blanco con nada en ella y javascript en mi barra de ubicación. Sin embargo, esto se esquiva un poco mediante el uso de un onlick.

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

Lo mejor es enlazar un controlador de eventos al elemento como muchas otras personas han dicho, sin embargo, <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 enlazar para cada instancia. En algunos casos, este enfoque ofrece un mejor rendimiento. YMMV

Otro interesante tid-bit....

onclick & href tener diferentes comportamientos al llamar a javascript directamente.

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

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

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 se puede hacer 10 clics y tienen solo 1 ejecución de la función.

Firefox funciona bien.

Esto funciona

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

 <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>