CheckEvents

Check mobile vs desktop click event

by dalvarezmartinez1

HTML

<div class="one">

</div>

<div class="two">

</div>

CSS

.one,
.two {
  height: 200px;
  width: 200px;
}

.one {
  background-color: yellow;
}

.two {
  background-color: orange;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const oneElement = document.querySelector('.one');
  const twoElement = document.querySelector('.two');

  oneElement.addEventListener('click', event => changeBackgroundToBlue(event, 'yellow'));
  oneElement.addEventListener('mousedown', event => logEvent(event));
  oneElement.addEventListener('mouseup', event => logEvent(event));

  twoElement.addEventListener('click', event => changeBackgroundToBlue(event, 'orange'));
  twoElement.addEventListener('mousedown', event => logEvent(event));
  twoElement.addEventListener('mouseup', event => logEvent(event));
});

function changeBackgroundToBlue(event, color) {
  logEvent(event);
  event.target.style.backgroundColor = 'blue';
  setTimeout(() => {
    event.target.style.backgroundColor = color;
  }, 1000)
}

function logEvent(event) {
  console.log(event.target.classList + '  ' + event.type);
}