Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

131
Vistas
diferencia entre tener un controlador de clic en un botón o en su padre?

Entre

 <button onClick={...}>Click me</button>

y

 <span onClick={...}> <button>Click me</button> </span>

¿Hay alguna diferencia para el usuario? Sé que el evento de clic siempre aparecerá en el elemento span , pero ¿hay algún problema de accesibilidad o consecuencias no deseadas que puedan surgir de esto?

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

¡Hay una gran diferencia!

Si tabula a un <button> para que esté enfocado, puede activarlo usando Enter y activará el controlador de clic. No hará esto con un <span> (incluso si agrega tabindex="0" al <span> para que sea enfocable).

Además, tener un controlador de clic en un <span> alrededor de un <button> causará problemas, ya que luego tiene elementos activos anidados. Esto significa que cuando hace clic en el <button> que está dentro de un <span> no hay forma de saber qué elemento se supone que activa un evento (¿es el controlador de clics <span> o el controlador de clics <button> ?)

La pregunta es, ¿por qué desea adjuntar el controlador a <span> , ya que puede ser que haya una mejor manera de hacer lo que está intentando? ¡Avísame y veré si puedo ayudarte a estructurar mejor las cosas / solucionar el problema!

about 4 years ago · Juan Pablo Isaza Denunciar

0

dado que su pregunta es sobre accesibilidad, seguramente no debería hacer esto porque tiene un elemento nativo para "hacer clic en cosas" en HTML, pero si insiste, puede hacer que un lapso funcione como un botón:

  • agregando el atributo role='button'
  • manejar el valor del atributo presionado por aria
  • definir un valor para el atributo tabindex.

si no hizo esto, los usuarios de los lectores de pantalla tendrán dificultades en su sitio web

este enlace contiene un ejemplo de cómo el botón puede considerarse un div con atributos adicionales: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

about 4 years ago · Juan Pablo Isaza Denunciar

0

En esa configuración, deberías estar bien. Sin embargo, si tenía un <span> dentro del <button> , entonces es cuando se encontrará con problemas porque un botón no debe contener elementos secundarios, solo el valor.

<button type="button" onclick="alert("Yo");"></button> = funciona

<button type="button"><span onclick="alert("Yo");"></button> = falla

Y luego creo que Firefox maneja estos eventos de manera diferente a Chrome, pero las últimas compilaciones deberían estar bien.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda