Click outside

by Sova

HTML

<div class="container">
  <div class="child">
    <button>
      Button
    </button>
    
    <span>
      Text
    </span>
  </div>
</div>

CSS

.container {
  padding: 20px;
  background: blue;
}

.child {
  padding: 10px;
  background: red;
}

JavaScript

const child = document.querySelector('.child');
const someAction = () => console.log('click outside red');

window.addEventListener('click', (e) => {
  if (e.target !== child && !child.contains(e.target)) {
  	someAction();
  }
});