8

I need to track user touch events. I want to track when user swipes from edges.
For example when user swipes from left vertical edge I will show a menu, from right edge make an alert, and show another menu when user swipes from top.

I couldn't find a similar usage.
How can I make this behaviour ? Tracking swipe from edges ?
I tried this with hammer.js because I use jQuery,
But other libraries (QuoJS, TouchSwipe, Touchy etc.) are ok for me.

Fiddle: http://jsfiddle.net/mavent/ym4JV/51/

 $(document).hammer()
    .on("tap doubletap hold drag swipe pinch rotate dragup dragdown swipeup swipedown", function (event) {
        $('#updateArea').html(event.type + ". direction:" + event.gesture.direction  + "<br>deltaX:" + event.gesture.deltaX.toFixed(2)         + ". deltaY:" + event.gesture.deltaY.toFixed(2) + "<br> centerX:" + event.gesture.center.pageX.toFixed(2) + ". centerY:" + event.gesture.center.pageY.toFixed(2));
        var currentText = $('#logArea').text();
        $('#logArea').text(""+currentText+" . "+event.type);
    });

enter image description here

trante
  • 33,518
  • 47
  • 192
  • 272
  • 1
    you will have massive problems with iOS7 and its safari. it will catch these swipes and interpret it as page-back and page-forward. – mador Jun 11 '14 at 12:52
  • Thanks for the warning. I can disable swipe feature from certain devices like IOS, Safari etc. – trante Jun 11 '14 at 13:04
  • hmm, you could check if your deltaX is <= 0 (swipe from the left egde) or its >= document.width (swipe from the right edge). just test it, maybe it will work ;) – mador Jun 11 '14 at 13:15
  • @trante can you please explain how to disable the swipe feature in IOS/Safari? – Mr_Green May 14 '15 at 04:11
  • Sorry for misunderstanding. I mean, I don't serve my swiping behaviour to those devices. I only serve this for android devices. – trante May 14 '15 at 17:57
  • @trante what was the solution using hammer js? I'm still searching for an edge swipe done with hammer. – Null isTrue Mar 12 '18 at 14:15

3 Answers3

7

Using Hammer.js v2.0.4, I found that this worked best:

$("html").hammer().on('swiperight', function (e) {
    var endPoint = e.pointers[0].pageX;
    var distance = e.distance;
    var origin = endPoint - distance;

    if (origin <= 15) {
        // They swiped, starting from no more than 15px away from the edge. 
    }
});
Shyam3089
  • 459
  • 1
  • 5
  • 20
Travis Wilson
  • 130
  • 1
  • 8
3

I think this will work:

first check if the touchstart event happens at the edge of the screen:

var startDragAtBorder = false;
$(document).on('touchstart', function(e) {
   var xPos = e.originalEvent.touches[0].pageX;

   if(xPos < 5) { // this can also be xPos == 0; whatever works for you
    startDragAtBorder = true;   
   }
   else{
    startDragAtBorder = false;
   }
});

than setup the drag event with Hammer:

$(document).hammer().on('drag', function(e){
  if(startDragAtBorder && e.gesture.direction == 'right'){
    // check that the drag event started at the edge and that the direction is to the right

    var currentText = $('#logArea').text();   
    $('#logArea').text(""+currentText+" . "+e.type);
  }
});

working fiddle: http://jsfiddle.net/ym4JV/55/

BrendanMullins
  • 587
  • 3
  • 18
2

I had trouble making this work using Hammer.JS - v2.0.8 and refering to the actual documentation.
Based on 2BitNerd's answer here is what I used:

Hammer(document.body).on("swiperight", function(e) {
    var endPoint = e.pointers[0].pageX;
    var distance = e.distance;
    var origin = endPoint - distance;
    if (origin <= 15) {
        // They swiped, starting from no more than 15px away from the edge. 
    }
});

The .gesture attribute has to be skipped for me to make this work as it does not exist.

Community
  • 1
  • 1
d6bels
  • 1,432
  • 2
  • 18
  • 30
  • maybe using `deltaX` instead of `distance` will be a better idea. Anyway, this is my code for right edge swipe (swipeleft): `var origin_from_left = $(window).width() - (e.pointers[0].pageX - e.deltaX)` – aliqandil May 11 '17 at 18:38