Hay un cuadrado grande y un cuadrado pequeño en el que el cuadrado grande es la capa superior. Cuando hago clic solo en el cuadrado grande, quiero que se reproduzca el evento de clic del cuadrado grande. Cuando hago clic en el cuadrado pequeño, quiero que se reproduzcan ambos eventos de clic.

No quiero poner un div en otro.

Gracias por adelantado :-)

El componente:

 function App() { const clickOnSmall = () => { console.log('SMALL') } const clickOnLarge = () => { console.log('LARGE') } return ( <div className="App"> <div className={'small'} onClick={clickOnSmall}></div> <div className={'large'} onClick={clickOnLarge}></div> </div> ) }

El CSS:

 .large { background: rgba(255, 0, 0, 0.4); width: 50%; height: 50%; position: absolute; left: 25%; top: 25%; z-index: 2; } .small { background: rgba(0, 255, 0, 0.2); width: 30%; height: 30%; position: absolute; left: 35%; top: 35%; z-index: 1; }

El navegador: navegador

Hay un cuadrado grande y un cuadrado pequeño en el que el cuadrado grande es la capa superior. Cuando hago clic solo en el cuadrado grande, quiero que se reproduzca el evento de clic del cuadrado grande. Cuando hago clic en el cuadrado pequeño, quiero que se reproduzcan ambos eventos de clic.

No quiero poner un div en otro.

Gracias por adelantado :-)