Javascript触摸移动，当用户从边缘滑动时跟踪 [英] Javascript touch movement, track when user swipes from edges

问题描述

我需要跟踪用户触摸事件。我想跟踪用户从边缘滑动的时间。

例如，当用户从左侧垂直边缘滑动时，我将显示一个菜单，从右边缘发出警报，并在用户从顶部滑动时显示另一个菜单。 / p>

我找不到相似的用法。

我该如何做出这种行为？跟踪从边缘滑动？

我尝试使用 hammer.js ，因为我使用jQuery，

但是其他库（ QuoJS ， TouchSwipe ， Touchy 等）对我来说没问题。

小提琴： http://jsfiddle.net/mavent/ym4JV/51/

  $（文件）。 hammer（）
 .on（tap doubletap hold drag swipe pinch rotate dragup dragdown swipeup swipeown，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）; 
}）; 
  

解决方案

使用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）{
 //他们从距离边缘不超过15px开始滑动。
} 
}）; 
  

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

解决方案

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

这篇关于Javascript触摸移动，当用户从边缘滑动时跟踪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！