<div class="block block--1"></div>
<div class="block block--2"></div>

<pre id="debug"></pre>

.block {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: #f007;
}

.block--2 {
  background-color: #0f07;
  margin-left: -75px;
}

.anim {
  animation: a 1s;
}

@keyframes a {
  50% { transform: scale(0.25); }
}

const targets = [
  document.querySelector('.block--1'),
  document.querySelector('.block--2')
];

window.addEventListener('click', ({ clientX, clientY }) => {
  const elements = document.elementsFromPoint(clientX, clientY);
  elements
    .filter(el => targets.includes(el))
    .forEach(t => t.dispatchEvent(new CustomEvent('bang')));
  
  debug.textContent = `click on: \n${ elements.map(el => [el.tagName, ...el.classList].join('.')).join('\n') }`;
});

const onBang = ({ currentTarget }) => {
  currentTarget.classList.add('anim');
  const onAnimEnd = ({ animationName }) => {
    if (animationName !== 'a') return;
    currentTarget.classList.remove('anim');
    currentTarget.removeEventListener('animationend', onAnimEnd);
  }
  currentTarget.addEventListener('animationend', onAnimEnd);
}

targets.forEach(t => t.addEventListener('bang', onBang));