Saltar al contenido

Función de JavaScript en href frente a onclick

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>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *