SCR35Asociar las acciones de JavaScript a botones y enlaces

Enlace que ejecuta un script y no tiene alternativa para navegadores sin scripts

Este enfoque solo debe usarse cuando se confía en los scripts como tecnología compatible con la accesibilidad.

Aunque no queremos navegar desde este enlace, debemos usar el atributo href en el elemento a para que sea un verdadero enlace y obtenga el tratamiento de eventos adecuado. En este caso usamos href="#" como destino del enlace, pero podría usarse cualquier cosa. Nunca se navegará por este enlace.

El «return false;» al final de la función de manejo de eventos doStuff() indica al navegador que no navegue al URI. Sin él, la página se recargaría después de ejecutarse el script.

<script> 
  function doStuff() {
    //do stuff
    return false;
  }
</script>
<a href="#" onclick="return doStuff();">do stuff</a>

Enlace que ejecuta un script, pero navega a otra página cuando los scripts no están disponibles

Este enfoque puede usarse para crear sitios que no dependan de los scripts, siempre y cuando el destino de la navegación ofrezca la misma funcionalidad que el script. Este ejemplo es idéntico al ejemplo 1, salvo que ahora su href apunta a una página real, dostuff.html. La página dostuff.html debe ofrecer la misma funcionalidad que el script. El «return false;» al final de la función de manejo de eventos doStuff() indica al navegador que no navegue al URI. Sin él, el navegador navegaría a dostuff.html después de ejecutarse el script.

<script> 
  function doStuff() {  
  //do stuff
  return false;
}
</script>
<a href="dostuff.html" onclick="return doStuff();">do stuff</a>

Hay disponible un ejemplo funcional de este código. Consulte Creating Action Links using JavaScript (crear enlaces de acción con JavaScript).

Botón que ejecuta un script y recurre al envío de un formulario para los usuarios sin scripts

Este enfoque pueden usarlo los sitios que no dependen de los scripts, siempre y cuando el envío del formulario ofrezca la misma funcionalidad que el script. El onsubmit="return false;" impide que se envíe el formulario.

<script>
function doStuff() {
  //do stuff
}
</script>
<form action="doStuff.aspx" onsubmit="return false;">
  <input type="submit" value="Do Stuff" onclick="doStuff();">
</form>

Hay disponible un ejemplo funcional de este código. Consulte Creating Action Buttons using JavaScript (crear botones de acción con JavaScript).

Botón que ejecuta un script, implementado con input type="image"

Tenga en cuenta que debe añadirse un atributo alt al input para proporcionar un equivalente textual de la imagen. Este enfoque solo debe usarse cuando se confía en los scripts.

<script>
function doStuff() {
  //do stuff
  return false;
}
</script>
<input type="image" src="stuff.gif" alt="Do stuff" onclick="return doStuff();">

Botón que ejecuta un script, implementado con input type="submit", input type="reset" o input type="button"

Este enfoque solo debe usarse cuando se confía en los scripts.

<input type="submit" onclick="return doStuff();" value="Do Stuff">

Botón que ejecuta un script, implementado con button

Esto resulta útil cuando se desea más control sobre el aspecto del botón. En este ejemplo concreto, el botón contiene tanto un icono como texto. Este enfoque solo debe usarse cuando se confía en los scripts.

<button onclick="return doStuff();">
  <img src="stuff.gif" alt="stuff icon">
  Do Stuff
</button>