0
126
VisualizaçõesEvitar onClick del elemento base si se hace clic en onClick del botón de superposición
Tengo un componente <button> superpuesto a un componente <div> que muestra una imagen.
El componente del botón es una [X] roja como se muestra en la siguiente imagen. Tengo un onClick Listener separado para <button> y <div> . Quiero asegurarme de que cuando se activa el onClick del botón, es decir, se hace clic en [X], el onClick de <div> no debería ejecutarse.
¿Como hacer esto?
He intentado esto, pero no funciona
Primero se ejecuta el onClick del <button> y luego se ejecuta el onCLick de <div>
const onClickButtonHandler = (event) => { event.preventDefault(); console.log("BTN HANDLER") }; const onClickDivHandler = (event) => { console.log("DIV HANDLER") }; 
1 Respostas
Responde à pergunta0
document.getElementById('mydiv') .addEventListener('click', function (event) { console.log("div clicked") }); document.getElementById('xAndDiv') .addEventListener('click', function (event) { console.log("x clicked, div click also executes") }); document.getElementById('x') .addEventListener('click', function (event) { event.stopPropagation() console.log("only x click executes") }); .div { background-image: url( https://png.pngtree.com/thumb_back/fw800/back_our/20190628/ourmid/pngtree-clear-sample-newspaper-spring-forest-playground-background-design-image_276784.jpg); background-size: cover; height: 250px; } .x { color:red; } <div id="mydiv" class="div"> <button class="x" id="xAndDiv" >X & Div </button> <button class="x" id="x" >Only X</button> </div>Debe detener la propagación del evento al hacer clic en el botón
const onClickButtonHandler = (event) => { event.stopPropagation(); console.log("BTN HANDLER") };Evita que el evento suba al nivel principal
codesandbox para referencia de reacción https://codesandbox.io/s/awesome-thunder-1x0coz?file=/src/App.js
Leer más sobre stopPropagation en MDN