Detectar touchpad vs mouse en Javascript

Nuestros programadores estrellas han agotado sus depósitos de café, en su búsqueda diariamente por la respuesta, hasta que Celeste encontró el hallazgo en Beanstalk así que en este momento la comparte con nosotros.

Solución:

Es posible que este tema ya esté resuelto, pero la respuesta fue que no hay forma de detectarlo. Bueno, necesitaba encontrar una solución, era muy importante. Así que encontré una solución aceptable para este problema:

var scrolling = false;
var oldTime = 0;
var newTime = 0;
var isTouchPad;
var eventCount = 0;
var eventCountStart;

var mouseHandle = function (evt)  typeof isTouchPad !== "undefined";
    console.log(isTouchPadDefined);
    if (!isTouchPadDefined) 
        if (eventCount === 0) 
            eventCountStart = new Date().getTime();
        

        eventCount++;

        if (new Date().getTime() - eventCountStart > 100) 
                if (eventCount > 10) 
                    isTouchPad = true;
                 else 
                    isTouchPad = false;
                
            isTouchPadDefined = true;
        
    

    if (isTouchPadDefined)  evt.wheelDelta>0) ? 1 : -1;

        if (isTouchPad) 
            newTime = new Date().getTime();

            if (!scrolling && newTime-oldTime > 550 ) 
                scrolling = true;
                if (direction < 0) 
                    // swipe down
                 else 
                    // swipe up
                
                setTimeout(function() oldTime = new Date().getTime();scrolling = false, 500);
            
         else 
            if (direction < 0) 
                // swipe down
             else 
                // swipe up
            
        
    

Y registrando los eventos:

document.addEventListener("mousewheel", mouseHandle, false);
document.addEventListener("DOMMouseScroll", mouseHandle, false);

Puede necesitar algo de optimización y tal vez no sea perfecto, ¡pero funciona! Al menos puede detectar un trackpad de macbook. Pero debido al diseño, diría que debería funcionar en cualquier lugar donde el pad presente muchas llamadas de eventos.

Así es como funciona:

Cuando el usuario se desplaza por primera vez, detectará y verificará que en 50 ms no se activaron más de 5 eventos, lo cual es bastante inusual para un mouse normal, pero no para un trackpad.

Luego está la parte else, que no tiene importancia para la detección, sino más bien un truco para llamar a una función una vez, como cuando un usuario desliza el dedo. Por favor, acuda a mí si no fui lo suficientemente claro, fue muy complicado hacer que esto funcionara y, por supuesto, es una solución menos que ideal.

Editar: Optimicé el código ahora tanto como pude. Detecta el mouseroll por segunda vez y desliza el trackpad al instante. También se eliminó una gran cantidad de código repetido e innecesario.

Editar 2 Cambié los números para la verificación de tiempo y los números de eventos llamados de 50 a 100 y de 5 a 10 respectivamente. Esto debería producir una detección más precisa.

Compare e.wheelDeltaY y e.deltaY (o e.deltaMode en Firefox) para detectar dispositivos de mouse con panel táctil

function handler(e) 
    var isTouchPad = e.wheelDeltaY ? e.wheelDeltaY === -3 * e.deltaY : e.deltaMode === 0
    // your code
    document.body.textContent = isTouchPad ? "isTouchPad" : "isMouse"

document.addEventListener("mousewheel", handler, false);
document.addEventListener("DOMMouseScroll", handler, false);

Podrías detectar eventos JS.

Un dispositivo táctil disparará eventos táctiles como touchstart además de los eventos del ratón.

Un dispositivo no táctil solo activará los eventos del mouse.

Reseñas y calificaciones del tutorial

Si haces scroll puedes encontrar las acotaciones de otros gestores de proyectos, tú además puedes dejar el tuyo si dominas el tema.

---

---

Utiliza Nuestro Buscador