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.
<!DOCTYPE html> <html> <head> <title>Problema</title> <script> window.addEventListener('load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('div1'); ob.addEventListener('click',presionRecuadroExte,false); ob=document.getElementById('div2'); ob.addEventListener('click',presionRecuadroInte,false); } function presionRecuadroInte(event) { alert('se presionó el recuadro interior'); event.stopPropagation(); } function presionRecuadroExte() { alert('se presionó el recuadro exterior'); } </script> <style> .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; }</style> </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> </body> </html>
El código javascript es:
window.addEventListener('load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('div1'); ob.addEventListener('click',presionRecuadroExte,false); ob=document.getElementById('div2'); ob.addEventListener('click',presionRecuadroInte,false); } function presionRecuadroInte(event) { alert('se presionó el recuadro interior'); event.stopPropagation(); } function presionRecuadroExte() { alert('se presionó el recuadro exterior'); }
Inicializamos la captura de eventos click para los dos div:
var ob=document.getElementById('div1'); ob.addEventListener('click',presionRecuadroExte,false); ob=document.getElementById('div2'); ob.addEventListener('click',presionRecuadroInte,false);
Cuando se presiona con el mouse dentro del div interior se dispara el método presionRecuadroInte donde procedemos a mostrar un mensaje e inmediatamente detenemos el burbujeo de eventos llamando al método stopPropagation:
function presionRecuadroInte(event) { alert('se presionó el recuadro interior'); event.stopPropagation(); }