49 - Detener el burbujeo de eventos (DOM)



Problema:Crear una página que contenga tres botones. Cuando se presione alguno de ellos mostrar un mensaje por pantalla. También mostrar un mensaje cuando se presione el fondo del documento. Luego modifique el programa comentando la línea donde se activa el burbujeo (debería aparecer tanto el mensaje que se presionó el botón como que se presionó el documento)
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <input type="button" value="Botón 1" id="b1">
    <input type="button" value="Botón 2" id="b2">
    <input type="button" value="Botón 3" id="b3">
    <script src="funciones.js"></script>
</body>

</html>
document.getElementById('b1').addEventListener('click', presionBoton)
document.getElementById('b2').addEventListener('click', presionBoton)
document.getElementById('b3').addEventListener('click', presionBoton)
document.addEventListener('click', presionDocumento)

function presionBoton(e) {
    e.stopPropagation()
    let ref = e.target
    alert(ref.value)
}

function presionDocumento(e) {
    alert('se presionó el fondo del documento')
}
Ver solución


Retornar