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

- trante

---

你将在iOS7及其Safari中遇到巨大的问题。它会捕捉这些轻扫动作，并将其解释为页面后退和页面前进。 - mador

谢谢你的提醒。我可以禁用某些设备（如IOS、Safari等）上的滑动功能。 - trante

嗯，你可以检查一下你的deltaX是否小于等于0（从左边滑动）或者大于等于document.width（从右边滑动）。只是试试看，也许会有效果的 ;) - mador

@trante，您能否请解释一下如何在IOS/Safari中禁用滑动功能？ - Mr_Green

抱歉造成了误解。我是指，我不会将我的滑动行为服务于那些设备，而只会为安卓设备提供此服务。 - trante

@trante，使用hammer js的解决方案是什么？我仍在寻找使用hammer完成边缘滑动的方法。 - Null isTrue

Answer 1

使用 Hammer.js v2.0.4 版本，我发现以下方法最为有效：

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

- Travis Wilson

---

未捕获的 TypeError: 无法读取未定义的“pointers”属性 - Madan Bhandari

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

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

- BrendanMullins

Answer 3

我在使用Hammer.JS - v2.0.8时遇到了问题，并参考了实际文档。根据2BitNerd的答案，以下是我使用的内容：

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属性，因为它不存在。

- d6bels

---

也许使用 deltaX 代替 distance 会是一个更好的主意。无论如何，这是我的右边缘滑动 (swipeleft) 代码： var origin_from_left = $(window).width() - (e.pointers[0].pageX - e.deltaX) - aliqandil