0

En una lista (ul li) quiero que el usuario al pinchar en un <li> de varios que tengo le lleve al la url correspondiente.

Mi duda es simple. ¿Sería correcto que usara en cada uno de los li la función onclick o es mejor que incluya html puro y ponga dentro de cada li el a href?

3 respuestas 3

3

Siendo puristas, consideraría mejor usar una etiqueta <a>:

  • semánticamente: Si tenemos una etiqueta creada para expresar un enlace a otro documento, siempre será mejor usarla que sobrecargar otra etiqueta con funcionalidades extras, mejorando la accesibilidad y la usabilidad (funciona sin Javascript activado, la podenos navegar hasta el enlace con la tecla Tab)
  • visualmente: A menos que añadas estilos, un elemento <li> no se subraya al señalarlo con el ratón.

Si no somos tan puristas (o los requisitos no son tan estrictos), es más rápido asignar event listeners mediante Javascript, pero nunca recomendaría usar el atributo onclick:

let filas=document.getElementsByClassName('clickable-row');

for(let i=0;i< filas.length; i++) {
  filas[i].addEventListener('click', function () {
    let url=filas[i].getAttribute('data-href');
    console.log('Vamos a ir a', url);
    //window.location = url;
  });
}
tr.clickable-row:hover {
  text-decoration: underline;
}
<table>
  <tr class="clickable-row" data-href="https://https://es.stackoverflow.com/questions/233238/">
    <td>Una pregunta </td> <td>233238</td>
  </tr>
  <tr class='clickable-row' data-href="https://stackoverflow.com/questions/17147821">
    <td>Pregunta relacionada</td> <td>1234567</td>
  </tr>
</table>

El motivo es que de este modo no tienes que tocar el HTML para modificar el comportamiento, las buenas prácticas recomiendan separar datos (HTML), comportamiento (Javascript) y visualización/estilos (CSS) en diferentes ficheros.

5
  • y por ejemplo en una tabla si quiero que una fila sea un enlace seria mejor tambien añadir un <a> a cada uno de los td correspondientes o en ese caso lo mejor es añadirle el onclick al <tr> directamente. Gracias.
    – john_7573
    el 29 ene. 2019 a las 13:28
  • La respuesta no varía: añadir el onclick es menos trabajo para el desarrollador, pero obliga a que Javascript esté activado. Todo depende de tus prioridades, no hay solución objetivamente mala el 29 ene. 2019 a las 14:39
  • No es menos trabajo porque, cuando haya gente con el JS deshabilitado, la página se va a degradar 'gracefully' con la etiqueta a; con el onclick no hay funcionalidad y tendrá que arreglarlo igual.
    – Alfabravo
    el 29 ene. 2019 a las 16:49
  • @Alfabravo Tienes razón, pero estoy pensando en SPA donde sin Javascript directamente no hay página que ver (Angular, React...) el 29 ene. 2019 a las 16:54
  • En mi pagina si el usuario tiene javascript desactivado le sale un aviso obligandolo a activarlo, si no no podra usarla. Entonces pues eso no es un problema jeje
    – john_7573
    el 29 ene. 2019 a las 19:26
0

hablando de diseños de sistemas te dire que es mejor separar la presentación del comportamiento o acciones, es decir el html deber lo mas puro posible, y separar los comportamientos sea con Javascript, Jquery o lo que requieras, por lo cual es recomendable usar onclick. podrias hacer algo como esto:

<ul>
  <li><a href="https://www.google.com/" target="_blank">Gooogle</a></li>
  <li><a href="https://www.youtube.com/" target="_blank">Youtube</a></li>
</ul>

Como veis dentro del li agrego el a href y alli agrego la url de la web y el target que permite abrir la web deseada en una nueva pestaña.

Si deseas controlar el evento por javascript seria con algo como esto:

$("li").on('click', function() {
    var opcion = $(this).text();
    alert(opcion);
});

espero te sirva de guia suerte..!!

1
  • En el escenario que sea necesario el uso de javascript pienso que si es la mejor opción controlarlo de esta manera, de lo contrario te podría decir que sigue siendo mejor opción usar la etiqueta <a> el 28 ene. 2019 a las 15:55
0

Realmente a nivel de importancia semántica para Google el elemento <a></a> es más importante, ya que el mismo google sigue los datos más precisamente en su indexación (como si el enlace es dofollow o no-follow).

El enlace como tal es más "feo" podríamos decir, pero así como al elemento li le podemos quitar los puntos o viñetas usando la propiedad CSS list-style:none; tambien lo puedes hacer en los elementos a usando la propiedad text-decoration:none;.

El elemento lino es recomendable ponerle propiedades extra por el simple hecho que Google no los tomará en cuenta por no tener una etiqueta de enlace (<a>).

El comportamiento que le deseas agregar (onclick) no es para nada recomendable usarlo en el HTML, ¿Tiene consecuencias? No, para nada ¿Está bien hacerlo? las buenas practicas dicen que no, ya que cada fichero se separa (HTML, CSS y JS) es mejor usar en JS un funcion.addEventListener(); o si prefieres el Jquery usar el atributo on $funcion.on('click', callback(){});

¿Opinion propia ante el asunto del onclick? Simple, yo uso Jquery y usar un atributo onclick en HTML te genera un problema con el Scope de Javascript así que puedes encontrarte un problema muy grande si tu archivo JS no se ejecuta correctamente.

Espero te sirva :)

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.