Pointer vs Click

by Vladymyr Shevchuk

HTML

<div id="field" class="field">click me</div>

<button id="pointer">Dispatch pointer:"pointerdown" event</button>
<button id="mouse">Dispatch mouse:"click" event</button>

CSS

.field {
  width: 200px;
  height: 200px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  background: orange;
}

JavaScript

field.addEventListener('click', event => {
  console.table('click', event);
});

field.addEventListener('pointerdown', event => {
  console.table('mousedown', event);
});

pointer.addEventListener('click', () => {
  field.dispatchEvent(new MouseEvent('pointerdown'));
});

mouse.addEventListener('click', () => {
  field.dispatchEvent(new MouseEvent('click'));
});