Determine vertical direction of a touchmove

Question

i'm trying to implement a touch listener for tablets to trigger some actions depending whether it touchmoved upwards or downwards.

I tried the native listener:

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

But i don't know how to determine the direction.

Is this possible?

Or do i need to use touchstart/touchend, if I need this can I determine the direction before the touch movement stops?

If I can only do this with an external library, what's the best one?

thanks.

What does this has to do with Android? – Geert Bellemans Jun 21 '13 at 08:12 — Geert Bellemans, Jun 21 '13 at 08:12

score 72 · Accepted Answer · answered Mar 07 '14 at 18:22

72

I had some issues in Ipad and solved it with two events

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

answered Mar 07 '14 at 18:22

Aureliano Far Suau

6,531
2
22
25

1

AMAZING! I tried many many ways, tried Hammer.js, and try Andy solution above as well. but all of them didn't work. But @Aureliano makes it work with accuracy slide without having to add debounced onto it! – Atthapon Junpun-eak Aug 20 '14 at 18:02
Thanks! This is so much better than touchmove! So damn accurate :D – ueberkim Jan 07 '15 at 12:46
Can you tell me what was the issue in ipad? Did touchmove support in ipad safari? – Asim K T Sep 11 '15 at 08:46
Can't remember exactly but it wasn't a support issue but an accuracy one. – Aureliano Far Suau Sep 11 '15 at 16:07
2

It might be useful on `touchstart` event to add `e.preventDefault()` if you want to trigger some dragging or dynamic effects – João Pimentel Ferreira Jun 20 '19 at 22:32
I've used almost this but touchMove instead of touchEnd so I don't have to wait until the user stops dragging/scrolling – Gustavo Morais Oct 28 '19 at 02:06
this works for you? touchend should have no event parameter (unless jQuery adds something to it, I don't use jQuery, no idea) – Phil Jun 09 '20 at 07:02

Andy · Answer 2 · 2014-12-22T17:56:08.813

45

You need to save the last position of the touch, then compare it to the current one.
Rough example:

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

edited Dec 22 '14 at 17:56

answered Nov 07 '12 at 21:06

Andy

29,707
9
41
58

1

This doesn't work for me, tells me up one time and down another. Tested on iphone 6. – Dec 08 '16 at 19:50
doesnt work if you go from one element to the other after that – zEn feeLo Jun 23 '20 at 03:00

score 24 · Answer 3 · edited Oct 24 '14 at 09:19

24

Aureliano's answer seems to be really accurate, but somehow it didn't work for me, so giving him the credits I decided to improve his answer with the following:

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

I simply changed the 'touchend' event for 'touchmove'

edited Oct 24 '14 at 09:19

user3666197

1
6
50
92

answered Mar 10 '14 at 01:27

Juan Herrera

810
1
10
16

2

This IS the answer. It's the best solution. The problem with Aureliano's answer is that you must lift your finger to trigger the touchend. With this solution, the user can either lift their finger, OR keep swiping without lifting their finger, and it will continue to listen and trigger your code as they do, allowing your code to be more responsive. – Blair Connolly Jun 19 '20 at 13:39

Frank Snoek · Answer 4 · 2015-09-17T07:28:43.650

I have created a script that will ensure an element within your document will scroll without scrolling anything else, including the body. This works in a browser as well as a mobile device / 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();
});

Can you modify your solution with slide_top and slide_bottom detection? — Stefan, Dec 22 '16 at 12:28

manish · Answer 5 · 2014-06-14T13:32:50.753

This solution takes into account change in directions which the current answers does not. The solution below also takes care of touch sensitivity; this when the user is moving in one direction but on touch end the users finger nudges in a different direction messing up the actual direction.

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

Most browsers already implement something like a debounced handler for touch events, so you'll always have that conditional as true. — Frondor, Aug 13 '18 at 19:01

Determine vertical direction of a touchmove

5 Answers5

Linked