javascript - ¿cuál es la diferencia entre <button onclick=...> y <a href="#" onclick=.../>
Encuentro que muchas veces las páginas usan la etiqueta "a" y quiero hacer que sea como un botón. Es algo así:
<a href="#" class="button" onclick="...." />
Estoy confundido sobre por qué no usar simplemente la etiqueta "button"? como esto:
<button onclick="....">button</button>
¿Cuál es la diferencia entre? ¡Realmente quiero aprenderlo, gracias!
Una pregunta más de situación:
Tres "etiquetas <a> tipo botón" como se muestra a continuación:
Pista:
- Llamar a Ajax diferente y luego obtener un registro de período diferente
- Necesito usar onclick="location.replace()" para volver a la página anterior de manera suave.
Código original:
<a href="url" class="btn" >Today</a>
He cambiado a:
<a href="#" onclick="location.replace(url)" class="btn" >Today</a>
Considera sobre:
<button onclick="location.replace(url)">Today</button>
¿Qué harás en esta situación? ¿Es incorrecto usar la etiqueta button?
Respuesta #1
Esto es básicamente un artefacto histórico.
Se remonta a la época en que era mucho más fácil aplicar estilos personalizados a un ancla. Podías construir fácilmente anclas de «aspecto de botón» de tamaño automático usando más elementos dentro del propio ancla.
Hoy en día, con opciones de CSS mejoradas y mejor compatibilidad con los navegadores, esto no es necesario. Cuando button es el elemento semántico correcto, no tienes ninguna razón para usar a en su lugar.
Así que, usa anclas para enlaces a otras páginas. Siempre debe tener un href, en lugar de usar solo # y onclick. Ahora bien, todavía puedes usar onclick también; solo asegúrate de que el href te dirija a los mismos datos que onclick. Esto es muy útil cuando quieres tener una forma para que los bots de búsqueda naveguen por tu sitio, aunque a los usuarios reales se les presente, por ejemplo, una interfaz más receptiva (por ejemplo, descargando el contenido actualizado a través de AJAX). Asegúrate de que los métodos comunes para abrir el enlace en una nueva ventana/pestaña sigan funcionando (ni ctrl+clic, clic derecho ni clic del medio deberían ejecutar la acción de onclick).
Los botones son los elementos que están ahí para interactuar con la página en la que te encuentras actualmente, ya sea realizando scripting del lado del cliente o enviando un formulario al servidor.
EDITAR:
Con la edición de tu pregunta, es obvio que simplemente deberías usar un ancla con un href normal. No hay ninguna razón para usar onclick o un button, y realmente solo estás haciendo un simple hipervínculo, para eso son los anclajes.
Respuesta #2
Entonces la respuesta aquí es: semántica.
Se debe usar un ancla para un hipervínculo. Los elementos de navegación se utilizan para moverse de una página a otra. Es una referencia a datos a los que el usuario puede acceder haciendo clic en el enlace.
Un botón es un botón. Se usa para funcionalidad.
En tu ejemplo, ambos están llamando a un evento onclick, por lo que solo van a tener una diferencia. En el caso del enlace, tienes que sobrescribir el comportamiento predeterminado usando event.preventDefault().
Además, los 3 mejores resultados a través de Google:
http://davidwalsh.name/html5-buttons
HTML/CSS - Botones - Cuándo usar cada uno
http://www.reddit.com/r/Frontend/comments/1y9zdh/anchor_vs_button_a_question_on_html_semantics/