const handleMenu = e => { console.log(e.target); e.stopPropagation(); }Quiero consolar el evento cuando se hace clic en un div secundario. por ejemplo:
<div onclick={handleMenu}> <button>My orders</button> <button>Payment</button> </div> Por lo tanto, quiero activar la función handleMenu solo cuando se hace clic en esos botones y no activarla cuando se hace clic en el área del div principal, excepto en las áreas de los botones. ¿Cómo puedo hacerlo?
y sí, estoy usando reactjs . Si hay alguna forma alternativa de hacerlo con reactjs , será más útil.
Puedes hacerlo de la siguiente manera. Adjunte a la devolución de llamada del evento en el niño como sigue ..
if(event.currentTarget != event.target ) return; ....evento de destino = elemento que desencadenó el evento.
currentTarget event = elemento que tiene el detector de eventos.
En React, agregue una referencia al elemento div, verifique si el objetivo es igual a la referencia para ver si no es un evento propio
const myRef = React.useRef(null); const handleMenu = (e) => { myRef.current!==e.target console.log(myRef.current); e.stopPropagation(); }; return ( <div ref={myRef} onClick={handleMenu}> <button>My orders</button> <button>Payment</button> </div> );