Javascript触摸移动，当用户从边缘滑动时跟踪

Question

我需要跟踪用户触摸事件。我想跟踪用户从边缘滑动的时间 例如，当用户从左侧垂直边缘滑动时，我将显示一个菜单，从右边缘发出警报，并在用户从顶部滑动时显示另一个菜单。

我找不到相似的用法 我该怎么做这个行为？跟踪从边缘滑动？
我用hammer.js尝试了这个，因为我使用jQuery，
但其他图书馆（QuoJS，TouchSwipe，Touchy等）对我来说还可以。

小提琴：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);
    });

Answer 1

使用Hammer.js v2.0.4，我发现这个效果最好：

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

Answer 2

我认为这会奏效：

首先检查touchstart事件是否发生在屏幕边缘：

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

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

工作小提琴：http://jsfiddle.net/ym4JV/55/

Answer 3

使用Hammer.JS - v2.0.8并参考实际文档时，我无法完成这项工作 基于2BitNerd's answer这是我使用的：

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

我必须跳过.gesture属性才能使其工作，因为它不存在。