Tengo una situación como si tuviera un div Wrapper y un div Child y estoy haciendo console.log('any text') cuando hago clic en el div Wrapper, está consolando el texto {lo que tiene sentido para mí} pero cuando hago clic el Niño div Todavía consuela el Texto. {Lo cual es raro
let test = document.querySelector('.test') test.addEventListener('click', function() { console.log('wrapper clicked') }) .test{ width:100%; heightL:100vh; display: flex; justify-content: center; align-items:center; } .exam{ height: 100vh; width: 50%; color:white; font-family:sans-serif; display: grid; place-items:center; background: #000; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="test"> <div class="exam"> <h1>Click Me</h1> </div> </div> </body> </html>a mi}
Entonces, quiero saber por qué sucede esto. Como cuando hago clic en Child div , ¿por qué todavía consuela el texto? y ¿Cómo hacer que solo consuele el texto cuando se hace clic en el envoltorio, no en el niño?
En javascript, cuando agrega un detector de eventos a una etiqueta que tiene hijos, si hace clic en los hijos, el evento se activará porque los hijos heredan los detectores de eventos.
Porque es como si su contenedor contuviera sus elementos secundarios, por lo que definitivamente funciona como mencionó. Entonces, mi idea es que debes poner el texto fuera del envoltorio. Como este y algún truco css.
let test = document.querySelector('.exam') test.addEventListener('click', function() { console.log('wrapper clicked') }) .test{ width:100%; height:100vh; display: flex; justify-content: center; align-items:center; background: red; } .exam{ height: 100vh; width: 50%; color:white; font-family:sans-serif; display: grid; place-items:center; background: #000; position: relative; } .text { position: absolute; color:white; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="test"> <div class="exam"> </div> <h1 class="text">Click Me</h1> </div> </body> </html>