<button id="button">"click" me</button>

@import url('https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap');

html,
body {
  display: grid;
  height: 100vh;
  place-items: center;
}

#button {
  background-color: white;
  border: 3px solid rebeccapurple;
  border-radius: 7px;
  color: rebeccapurple;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 16px;
}
#button:hover {
  background-color: lavender;
}
#button:active {
  background-color: rebeccapurple;
  color: white;
}
#button:focus-visible {
  box-shadow: 0 0 0 2px white, 0 0 0 5px rebeccapurple;
  outline: none;
}

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

function btn_handler (e) {
  if (e.type === 'click' && e.detail > 0) {
    return false;
  } else if (e.pointerType) {
    button.innerText = `Pointer Event: ${e.pointerType}`;
  } else if (e.detail === 0) {
    button.innerText = 'Keyboard Click Event!';
  } else {
    button.innerText = 'Something clicked this?';
  }
  
  window.setTimeout(() => {
    button.innerText = '"click" me';
  }, 2000);
}

button.addEventListener('pointerup', btn_handler);
button.addEventListener('click', btn_handler);