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: /

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

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

• javascript
• multi-touch
• hammer.js
• quojs

• 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 Commented Jun 11, 2014 at 12:52
• Thanks for the warning. I can disable swipe feature from certain devices like IOS, Safari etc. – trante Commented Jun 11, 2014 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 Commented Jun 11, 2014 at 13:15
• @trante can you please explain how to disable the swipe feature in IOS/Safari? – Mr_Green Commented May 14, 2015 at 4:11
• Sorry for misunderstanding. I mean, I don't serve my swiping behaviour to those devices. I only serve this for android devices. – trante Commented May 14, 2015 at 17:57

3 Answers 3

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

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/ym4JV/55/

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.