const div = document.querySelector('div')
const button = document.querySelector('button')

div.addEventListener('click', (e) => {
  console.log('Catch a click on the div')
})

button.addEventListener('click', (e) => {
  console.log('Catch a click on the button')
})

button.click()

// > Catch a click on the button
// > Catch a click on the div

import withoutPropagation from 'without-propagation'

const div = document.querySelector('div')
const button = document.querySelector('button')

div.addEventListener('click', (e) => {
  console.log('The event will be never fired')
})

button.addEventListener('click', withoutPropagation((e) => {
  console.log('Catch a click on the button only')
}))

button.click()

// > Catch a click on the button only