Detect click vs. touch in JavaScript

Question

I know you can detect if the browser is running on a device with a touchscreen as per this answer: https://stackoverflow.com/a/4819886/589921

But, I know some devices both have a touchscreen and a mouse. Can I detect the difference between those types of touch? Essentially I want to distinguish between 3 different events: onClick (which fires on click or on touch), onTouch (which fires only on touch), onMouseClick (which fires only on click).

Answer 1

You can use the pointerType property on PointerEvent to detect the input type ("mouse", "touch", or "pen"):

element.addEventListener('pointerdown', (event) => {
  if (event.pointerType === "mouse") {}
  if (event.pointerType === "touch") {}
  if (event.pointerType === "pen") {}
});

If you want specific events for each type of click, you can create custom events:

const mouse = new Event("mouseclick");
const touch = new Event("touch");
document.addEventListener("pointerdown", ({ pointerType, target }) => {
  if (pointerType === "mouse") target.dispatchEvent(mouse);
  if (pointerType === "touch") target.dispatchEvent(touch);
});

const someElement = document.querySelector(".box");
someElement.addEventListener("mouseclick", () => {
  console.log("Clicked with mouse");
});
someElement.addEventListener("touch", () => {
  console.log("Touched with mobile device");
});
someElement.addEventListener("click", () => {
  console.log("Clicked by some device (we don't know)");
});

.box {
  position: absolute;
  inset: 2em;
  background: darkred;
  padding: 1em;
}

<div class="box">A box with custom events</div>

(Note: not tested on touchscreen device)

Note that if you are using React or another framework, there may be different ways to create custom events.

In React, for example, you may implement these events with a reusable function:

const clickEvents = ({ onMouseClick, onTouch, onClick }) => ({
  onClick,
  onPointerDown({ pointerType }) {
    if (pointerType === "mouse") onMouseClick(); 
    if (pointerType === "touch") onTouch(); 
  },
});
function SomeComponent({ onClick, onMouseClick, onTouch, children }) {
  const clickEventProps = clickEvents({ onClick, onMouseClick, onTouch });
  return (
    <div className="something" {...clickEventProps}>
      <p>Custom events on this thing</p>
      {children}
    </div>
  );
}