Sé que puede detectar si el navegador se está ejecutando en un dispositivo con pantalla táctil según esta respuesta: https://stackoverflow.com/a/4819886/589921
Pero sé que algunos dispositivos tienen una pantalla táctil y un mouse. ¿Puedo detectar la diferencia entre esos tipos de contacto? Esencialmente, quiero distinguir entre 3 eventos diferentes: onClick
(que se activa al hacer clic o al tocar), onTouch
(que se activa solo al tocar), onMouseClick
(que se activa solo al hacer clic).
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> ); }