Conceptos de DHTML

En muchas situaciones podemos querer que un evento se dispare y no efectue el burbujeo, es decir que no pueda ser capturado por otros elementos de la página que lo contengan.

Para detener el burbujeo de eventos debemos llamar al metodo stopPropagation del parámetro que llega al método que captura el evento:

 event.stopPropagation();

Confeccionemos una página que contenga 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

<!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>

estilos.css

.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;
}

funciones.js

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')
})

Inicializamos la captura de eventos click para los dos div, cuando se presiona con el mouse dentro del div interior se muestra un mensaje e inmediatamente detenemos el burbujeo de eventos llamando al método stopPropagation:

document.getElementById('div2').addEventListener('click', (event) => {
    alert('se presionó el recuadro interior')
    event.stopPropagation();
})

49 - Detener el burbujeo de eventos (DOM)

Retornar