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.

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

Ver ejemplo anterior

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();
}

(adsbygoogle = window.adsbygoogle || []).push({});

Detener el burbujeo de eventos (DOM)