Javascript touch movement, track when user swipes from edges

问题

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

回答1:

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

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

    if (origin <= 15) {
        // They swiped, starting from no more than 15px away from the edge. 
    }
});

回答2:

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/

回答3:

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.

来源：https://stackoverflow.com/questions/24163202/javascript-touch-movement-track-when-user-swipes-from-edges

标签

javascript

multi-touch

hammer.js

quojs