Este es mi código,
export default myComponent = () => { const handleClick = (e) => { const parent = e.target.parentElement; if (parent.classList.contains('selected_category')) { parent.classList.remove('selected_category'); } else { parent.classList.add('selected_category'); } }; return ( <> <ul> <li className=""> <a onClick={handleClick}> content<span class="text-gray-25 font-size-12 font-weight-normal"> 121 </span> </a> </li> <li className=""> <a onClick={handleClick}> content<span class="text-gray-25 font-size-12 font-weight-normal"> 121 </span> </a> </li> </ul> </> ); }Escribí este código para cuando hice clic en el elemento de etiqueta, el elemento principal obtiene la clase 'selected_category' si aún no la tiene. Pero el problema aquí es que cuando hago clic en la clase de niños , la clase 'selected_category' se agrega a la etiqueta principal. hay alguna solucion para evitarlo?
Este es mi código en la caja de arena
Para profundizar más en mi comentario: el problema proviene del uso de e.target , que puede referirse al elemento al que está vinculado el detector de eventos O a sus descendientes. En este caso, su etiqueta <a> tiene <span> como elemento secundario. Cuando un evento de clic aparece en su etiqueta <a> que se originó en el <span> interno, entonces e.target se referirá a este último: que no es lo que desea.
Para asegurarse de obtener la referencia al elemento real al que está vinculado el detector de eventos en todo momento, debe usar e.currentTarget :
La propiedad de solo lectura
currentTargetde la interfazEventidentifica el destino actual del evento, ya que el evento atraviesa el DOM. Siempre hace referencia al elemento al que se ha adjuntado el controlador de eventos, a diferencia deEvent.target, que identifica el elemento en el que se produjo el evento y que puede ser su descendiente.
Por lo tanto, su función actualizada simplemente debería usar currentTarget en su lugar, es decir:
const handleClick = (e) => { // NOTE: Use e.currentTarget here instead of e.target const parent = e.currentTarget.parentElement; if (parent.classList.contains('selected_category')) { parent.classList.remove('selected_category'); } else { parent.classList.add('selected_category'); } };