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 custom hook:

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