Puede usar la propiedad pointerType en PointerEvent para detectar el tipo de entrada ( "mouse" , "touch" o "pen" ):

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

Si desea eventos específicos para cada tipo de clic, puede crear eventos personalizados :

 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>

(Nota: no probado en dispositivo de pantalla táctil)

Tenga en cuenta que si está utilizando React u otro marco, puede haber diferentes formas de crear eventos personalizados.

En React, por ejemplo, puedes implementar estos eventos con un enlace personalizado:

 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> ); }