49 - Detener el burbujeo de eventos (DOM)
Problema:
Disponer dos div (uno contenido en otro).Al presionar en el div interior mostrar un mensaje y detener el burbujeo al div que lo contiene.
pagina.html
estilos.css
funciones.js
Ejecución de la página
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prueba</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <h1>Presione con el mouse en el recuadro interior</h1> <h3>Detención del burbujeo.</h3> <div id="div1" class="recuadroexterior"> Este es contenido del recuadro exterior. <div id="div2" class="recuadrointerior"> Este es contenido del recuadro interior. </div> También es contenido del recuadro exterior. </div> <script src="funciones.js"></script> </body> </html>
.recuadrointerior { font-family: Courier; font-size: 12px; background-color: #ffffcc; border-width: 1px; border-style: dotted; border-color: #ffaa00; padding: 20px; } .recuadroexterior { font-family: Courier; font-size: 12px; background-color: #ff9900; border-width: 1px; border-style: dotted; border-color: #ffaa00; padding: 20px; }
document.getElementById('div2').addEventListener('click', (event) => { alert('se presionó el recuadro interior') event.stopPropagation() }) document.getElementById('div1').addEventListener('click', (event) => { alert('se presionó el recuadro exterior') })
No tiene disponible el navegador la capacidad de iframe
Retornar