Event Bubbling

by Ben Clayton

HTML

<div class="outer bubble">
  Outer Click
  <div class="inner bubble">
    <div>
      Inner click
    </div>
  </div>
</div>

<div class="outer nobubble">
  Outer Click
  <div class="inner nobubble">
    <div>
      Inner click
    </div>
  </div>
</div>

CSS

.outer {
  border: 1px solid gray;
  background-color: yellow;
  padding: 30px;
  display: inline-block;
  cursor:pointer;
}

.inner {
  border: 1px solid gray;
  background-color: pink;
  padding: 30px;
  display: inline-block;
}

JavaScript

$(".inner.bubble").on('click', function() {
  console.log('inner click')
});
$(".outer.bubble").on('click', function() {
  console.log('outer click')
});

$(".inner.nobubble").on('click', function(event) {
  event.stopPropagation();
  console.log('inner click no bubble')
});
$(".outer.nobubble").on('click', function() {
  console.log('outer click no bubble')
});
$(".inner.bubble").on('mouseover', function() {
  console.log('inner mouseover')
});
$(".outer.bubble").on('mouseover', function() {
  console.log('outer mouseover')
});
$(".inner.nobubble").on('mouseover', function() {
  event.stopPropagation();
  console.log('inner mouseover no bubble')
});
$(".outer.nobubble").on('mouseover', function() {
  console.log('outer mouseover no bubble')
});