Solución:
malo:
<a id="myLink" href="https://foroayuda.es/javascript:MyFunction();">link text</a>
bien:
<a id="myLink" href="https://foroayuda.es/#" onclick="MyFunction();">link text</a>
mejor:
<a id="myLink" href="https://foroayuda.es/#" onclick="MyFunction();return false;">link text</a>
incluso mejor 1:
<a id="myLink" title="Click to do something"
href="https://foroayuda.es/#" onclick="MyFunction();return false;">link text</a>
incluso mejor 2:
<a id="myLink" title="Click to do something"
href="https://foroayuda.es/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 ID del elemento.
$('#myLink').click(function(){ MyFunction(); return false; });
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; } );
En términos de javascript, una diferencia es que el this
palabra clave en el onclick
handler se referirá al elemento DOM cuyo onclick
atributo es (en este caso el <a>
elemento), mientras que this
en el href
atributo se referirá al window
objeto.
En términos de presentación, Si una href
El atributo está ausente en un enlace (es decir <a onclick="[...]">
) entonces, de forma predeterminada, los navegadores mostrarán el text
cursor (y no el deseado a menudo pointer
cursor) ya que está tratando el <a>
como un ancla y no 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á la apertura de href
en una ventana separada usando un menú contextual o un atajo. 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. Puede hacer esto de varias formas. Una forma común es usar una biblioteca de JavaScript como jQuery para vincular un evento:
<script type="text/javascript" src="https://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>