0
121
ViewsReaccionar evento burbujeo/propagación
Tengo un componente simple como:
<div onClick={toggleHiden} className="faq-item-header"> <h3>What is Bookmark?</h3> <img src={iconArrow} alt="arrow" /> </div> 
Esta es la función onclick, solo quiero alternar la lista de clases.
const toggleHiden = (e) => { console.log(e.target); e.target.nextSibling.firstChild.classList.toggle("hidden"); }; Mi plan es ejecutar la función toggleHiden al hacer clic en div, pero cuando mi mouse hace clic sobre img o h3 , el e.target está cambiando, trato de agregar stopPropagation en h3:
<h3 onClick={(e) => e.stopPropagation()}>What is Bookmark?</h3>y ahora no se puede hacer clic en el h3.
Lo que quiero es si hago clic en img o h3 , todavía cuenta como hacer clic en el div principal
¿Cómo puedo superar esto?
2 answers
Answer question0
Debe usar event.srcElement en lugar de event.target , ya que el target es el elemento más profundo en el que hizo clic, puede que no sea el mismo elemento con el que vincula el evento de clic, puede ser uno de sus elementos secundarios.
O puede convertir su función de controlador de clic en una declaration function y usar this en su lugar.
0
Si está utilizando este enfoque, puede hacer lo siguiente:
if(e.target.tagName === "h3" || e.target.tagName === "img") { e.target.parent.nextSibling.firstChild.classList.toggle("hidden"); } else { e.target.nextSibling.firstChild.classList.toggle("hidden"); }