jQuery Mobile中如何检测从边缘滑动的手势？

Question

在打开面板之前，我希望检测用户是否从边缘进行了滑动操作。下面是相应的代码：

$("#panel").panel("open");

$("#main").on("swiperight",function(event){
var data = event.originalEvent.touches ? event.originalEvent.touches[0] : event,
    coords = [data.pageX, data.pageY];

console.log(coords);
});

然而，coords 没有返回任何内容，因为我遇到了错误：

Uncaught TypeError: Cannot read property 'touches' of undefined

1. 那么，在滑动发生时有没有一种方法可以获取坐标？

2. 或者有没有一种简单的方法来检测起始位置是否来自左边缘？

谢谢。

- HP.

---

类似：https://dev59.com/Q4Dba4cB1Zd3GeqPFYrL - trante

Answer 1

在 jqm 1.4+ 中尝试以下方法，适当调整边缘修剪值，50 对我来说很好用。

$( "div.ui-page" ).on( "swiperight", function( e ) {
    if ( e.swipestart.coords[0] <50) {
    // your logic 
    }
});

这是关于x坐标的，同样地，你可以从coords[1]中获取y坐标。

- Deepu

Answer 2

这将适用于任何屏幕大小：

$("#main").on("swiperight",function( event ){
   // take 15% of screen good for diffrent screen size
   var window_width_15p = $( window ).width() * 0.15;
   // check if the swipe right is from 15% of screen (coords[0] means X)
   if ( event.swipestart.coords[0] < window_width_15p) {
      // open your panel
      $("#panel").panel("open");
   }
});

- Danny Michaeli

Answer 3

你可以像这样做。

$('#main').on('touchstart', function(e) {
   var xPos = e.originalEvent.touches[0].pageX;
   if(xPos == 0) { //Keep in mind the margin of failure from 0, when user touches.
      //Handle edge swipe
   }
});

- Rayf

---

touchstart 无法告诉我滑动是否发生以及滑动的持续时间。因为我还设置了 $.event.special.swipe.horizontalDistanceThreshold = 120; 来确保滑动足够长。 - HP.

为了澄清，我回答了你提出的两个问题。要得到完整的解决方案，您需要结合自己的解决方案来检测swiperight事件和我的示例来查看touchstarts的时间。如果触摸开始不在正确的边缘位置，则只需不处理边缘滑动即可。 - Rayf