Determinazione della direzione verticale di un touchmode

Question

Sto provando a implementare un ascoltatore tattile per i tablet per attivare alcune azioni a seconda che venga toccato verso l'alto o verso il basso.

ho provato l'ascoltatore nativo:

($document).bind('touchmove', function (e) 
{ 
    alert("it worked but i don't know the direction"); 
}); 

Ma io non so come determinare la direzione.

È possibile?

Oppure ho bisogno di usare touchstart/touchend, se ho bisogno di questo posso determinare la direzione prima che il movimento touch si arresti?

Se posso farlo solo con una libreria esterna, qual è la migliore?

grazie.

Answer 1

È necessario salvare l'ultima posizione del tocco, quindi confrontarla con quella corrente.
esempio ruvida:

var lastY; 
$(document).bind('touchmove', function (e){ 
    var currentY = e.originalEvent.touches[0].clientY; 
    if(currentY > lastY){ 
     // moved down 
    }else if(currentY < lastY){ 
     // moved up 
    } 
    lastY = currentY; 
}); 

Answer 2

Ho avuto alcuni problemi nel Ipad e risolto con due eventi

var ts; 
$(document).bind('touchstart', function (e){ 
    ts = e.originalEvent.touches[0].clientY; 
}); 

$(document).bind('touchend', function (e){ 
    var te = e.originalEvent.changedTouches[0].clientY; 
    if(ts > te+5){ 
     slide_down(); 
    }else if(ts < te-5){ 
     slide_up(); 
    } 
}); 

Answer 3

risposta di Aureliano sembra essere davvero precisi, ma in qualche modo non ha funzionato per me così, dandogli i crediti che ho deciso di migliorare la sua risposta con il seguente:

var ts; 
$(document).bind('touchstart', function(e) { 
    ts = e.originalEvent.touches[0].clientY; 
}); 

$(document).bind('touchmove', function(e) { 
    var te = e.originalEvent.changedTouches[0].clientY; 
    if (ts > te) { 
     console.log('down'); 
    } else { 
     console.log('up'); 
    } 
}); 

ho semplicemente cambiato l'evento 'touchend' per 'touchmove'

Answer 4

Questa soluzione prende in considerazione il cambio di direzioni che le risposte correnti non hanno. La soluzione qui sotto si occupa anche della sensibilità al tocco; questo quando l'utente si sta muovendo in una direzione, ma al tocco, il dito dell'utente si sposta in una direzione diversa che incasina la direzione effettiva.

var y = 0; //current y pos 
var sy = y; //previous y pos 
var error = 5; //touch sensitivity, I found between 4 and 7 to be good values. 

function move(e) { 
    //get current y pos 
    y = e.pageY; 

    //ingnore user jitter 
    if (Math.abs(y - sy) > error) { 
     //find direction of y 
     if (y > sy) { 
      //move down 
     } else { 
      //move up 
     } 
     //store current y pos 
     sy = y; 
    } 
} 

Answer 5

Ho creato uno script che garantirà che un elemento all'interno del documento scorrerà senza scorrere nient'altro, incluso il corpo. Funziona su un browser e su un dispositivo mobile/tablet.

// desktop scroll 
$('.scrollable').bind('mousewheel DOMMouseScroll', function (e) { 
    var e0 = e.originalEvent, 
    delta = e0.wheelDelta || -e0.detail; 

    this.scrollTop += delta * -1; 
    e.preventDefault(); 
}); 

var lastY; 
var currentY; 

// reset touch position on touchstart 
$('.scrollable').bind('touchstart', function (e){ 
    var currentY = e.originalEvent.touches[0].clientY; 
    lastY = currentY; 
    e.preventDefault(); 
}); 

// get movement and scroll the same way 
$('.scrollable').bind('touchmove', function (e){ 
    var currentY = e.originalEvent.touches[0].clientY; 
    delta = currentY - lastY; 

    this.scrollTop += delta * -1; 
    lastY = currentY; 
    e.preventDefault(); 
});