Event bubbling on Full-Screen elements

Click events bubble up normally even when an element is full-screen.

by David Iglesias

HTML

<div class="container">
  <div class="full-screen">
    <p>
      Click this box to make it full-screen.
    </p>
    <p>
      <label>Stop click propagation:
        <input type="checkbox" id="stop_propagation" />
      </label>
    </p>
    <p>
      <small>(Keep an eye on the JS console!)</small>
    </p>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

.container {
  border: 1px solid black;
}

.full-screen {
  background-color: #f90;
  overflow: hidden;
  text-align: center;
}

JavaScript

document.querySelector('.full-screen').addEventListener('click', (e) => {
  e.currentTarget.requestFullscreen();
  if (stop_propagation.checked) {
    e.stopPropagation();
    console.log('Click event propagation stopped');
  }
});

document.querySelector('.container').addEventListener('click', (e) => {
  console.log('A click event has bubbled up!', e);
});