Check if click was triggered by touch in modern browsers

Question

This question is an update to this one, but for modern browsers. (Unfortunately the answers here are outdated and/or not in vanilla JavaScript). Essentially I want to perform a simple test to detect if a click event was triggered by touch or mouse input.

The only answer in the aforementioned question that is foolproof and still works is to use the event.pointerType property. However, event.pointerType seems to only be defined in Chrome for the click event.

While I could use pointer-events (for instance pointerup), for which event.pointerType is defined for all browsers, pointerup behaves differently than click and is more similar to mouseup. In other words it does not register only true clicks, but also fires if the pointer was dragged around or started on another element.

For this reason, I would like to get this to work with regular click events. If anyone knows how I can reliably detect the input method it would be greatly appreciated.

Answer 1

A solution could be, first have a flag to check if get touched or not let's call it isTouched, this flag is false by default, and create an event listener on the touchstart event and once it get triggered it will turn isTouched to be true, also create another event listener for click and inside it conditionally check if isTouched is true, then reset the isTouched to be false, if it is with false, then there wasn't a touch event triggered, so it is just a click event.

let isTouched = false;
const testButton = document.getElementById('test');

testButton.addEventListener('touchstart', function(e) {
  isTouched = true;
});


testButton.addEventListener('click', function(e) {
  if (isTouched) {
    alert('Triggered by touch');
    isTouched = false;
  } else {
    alert('Triggered by mouse click');
  }
});

<button id="test">Test</button>