Detect click vs. touch in JavaScript [duplicate]

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('pointerup', (event) => {
  if (event.pointerType === "mouse") {}
  if (event.pointerType === "touch") {}
  if (event.pointerType === "pen") {}
});

Note - I have used pointerup event to match the behavior of click, but you can also use pointerdown.

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("pointerup", ({ 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 any device");
});

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

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

Tested for mobile on iOS 17 but this should work on any browser.

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:

function pointerEvents(
  listeners: {
    onMouse?: (event: PointerEvent) => void;
    onTouch?: (event: PointerEvent) => void;
  }
) {
  return {
    onPointerUp(event) {
      const { pointerType } = event;
      if (pointerType === "mouse") {
        listeners.onMouseClick?.(event); 
      } else if (pointerType === "touch") {
          listeners.onTouch?.(event);
      }
    },
  };
}

function MyComponent() {
  return (
    <button
      className="something"
      {...pointerEvents({
        onMouse: (e) => { /* … */ },
        onTouch: (e) => { /* … */ },
      })}
    >
      Click me
    </button>
  );
}