javascript - funciones - onclick href button
Función de JavaScript en href vs. onclick (13)
Quiero ejecutar una función de JavaScript simple en un clic sin ninguna redirección.
¿Hay alguna diferencia o beneficio entre poner la llamada de JavaScript en el atributo href (como esto:
<a href="javascript:my_function();window.print();">....</a>
) ¿Contra colocarlo en el atributo onclick (vincularlo al evento onclick )?
Además de todo aquí, el href se muestra en la barra de estado del navegador, y no hace clic en. Creo que no es fácil de usar para mostrar el código javascript allí.
En términos de javascript , una diferencia es que this palabra clave en el controlador onclick se referirá al elemento DOM cuyo atributo onclick es (en este caso el elemento <a> ), mientras que en el atributo href se referirá al objeto de window .
En términos de presentación , si un atributo href está ausente de un enlace (es decir, <a onclick="[...]"> ), de manera predeterminada, los navegadores mostrarán el cursor de text (y no el cursor del pointer menudo se desea) ya que trata a la <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 generalmente admitirá abrir esa href en una ventana separada mediante 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>
Esto funciona
<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>
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, por lo que requerirá 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, 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 utiliza
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.
Lo mejor es vincular un controlador de eventos al elemento como muchas otras personas han indicado, sin embargo, <a href="javascript:doStuff();">do stuff</a> funciona perfectamente en todos los navegadores modernos, y lo uso ampliamente al renderizar plantillas para evitar tener que volver a enlazar para cada instancia. En algunos casos, este enfoque ofrece un mejor rendimiento. YMMV
Otro tid-bit interesante ...
onclick & href tienen diferentes comportamientos cuando se llama directamente a javascript.
onclick pasará this contexto correctamente, mientras que href 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í, he omitido 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
Me funcionó usando esta línea de código:
<a id="LinkTest" title="Any Title" href="#" onclick="Function(); return false; ">text</a>
Personalmente, me parece molesto poner llamadas javascript en la etiqueta HREF. Por lo general, no presto atención a si algo es un enlace 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 que no tiene nada y javascript en mi barra de ubicación. Sin embargo, esto se evita un poco usando un solo clic.
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; } );
Tener javascript: en cualquier atributo que no sea específicamente para scripting es un método obsoleto de HTML. Si bien técnicamente funciona, aún estás asignando propiedades de javascript a un atributo que no es de 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 un foro en Google parece indicar que a Opera no le gustan las urls ''javascript:'').
Una mejor práctica sería la segunda forma, para poner su javascript en el atributo onclick , que se ignora si no hay una funcionalidad de scripting disponible. Coloque una URL válida en el campo href (comúnmente ''#'') para respaldo para aquellos que no tienen javascript.
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 será ejecutado una sola 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.
yo suelo
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. Use 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>
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 que mejor Porque return false evitará que el navegador siga el enlace.
mejor:
Utilice jQuery u otro marco similar para adjuntar el controlador onclick por el ID del elemento.
$(''#myLink'').click(function(){ MyFunction(); return false; });
<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>