JSFiddle - React, Tailwind, and code Playground

Keyboard vs click event.

by Travis Almand

HTML

<button>button</button>

CSS

button:active {
  background: red;
  border: 1px solid red;
}

JavaScript

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

function whichEvent(e) {
	console.log(e);
  
	if (e.clientX > 0 || e.clientY > 0 || e.detail > 0) {
  	console.log('mouse or touch');
  } else {
  	console.log('keyboard');
  }
}

button.addEventListener('click', whichEvent);
button.addEventListener('touchstart', whichEvent);

button.addEventListener('dblclick', function (e) {
	console.log(e);
});