JSFiddle - React, Tailwind, and code Playground

click and dblclick events

by Travis Almand

HTML

<button id="click">click</button>
<button id="dblclick">dblclick</button>
<button id="toggle" aria-pressed="false">toggle</button>
<button id="pointer">pointer</button>

CSS

#toggle[aria-pressed="true"] {
  background-color: green;
  color: white;
}

JavaScript

const click = document.querySelector('#click');
const dblclick = document.querySelector('#dblclick');
const toggle = document.querySelector('#toggle');
const pointer = document.querySelector('#pointer');

click.addEventListener('click', (e) => {
	console.log('click', e);
	e.target.innerText = `click ${e.detail}`;
});
click.addEventListener('keyup', (e) => {
	console.log('keyboard', e);
});

dblclick.addEventListener('dblclick', (e) => {
	console.log('dblclick', e);
	e.target.innerText = `dblclick ${e.detail}`;
});

toggle.addEventListener('click', (e) => {
	if (e.detail > 1) {
  	e.target.setAttribute('aria-pressed', true);
    e.target.innerText = 'pressed';
  } else {
  	e.target.setAttribute('aria-pressed', false);
    e.target.innerText = 'toggle';
  }
});

pointer.addEventListener('pointerdown', (e) => {
	console.log('pointer', e);
});