在 jQuery-mobile 中计算滑动距离答案

【问题标题】：Calculate swipe distance in jQuery-mobile在 jQuery-mobile 中计算滑动距离
【发布时间】：2014-10-01 17:41:29
【问题描述】：

希望您今天一切顺利，我正在尝试计算移动网站上的滑动距离（触摸手势），您如何计算出用户在屏幕上滑动了多少像素？

$('.cmButtons').live('swipeleft',function(){
    console.log("swiped left");
});

【问题讨论】：

我只知道不使用 jQuery 如何做到这一点，所以这不是一个答案，但也许是一个线索。滑动的起始 x、y 坐标在 touchStart 事件中建立。在那里，您也将 startPos 分配给 endPos，即默认结束位置。在 touchMove 侦听器中，您不断记录当前坐标，使这些坐标成为 endPos 坐标。在 touchEnd 中，您注意到 startPos 和 endPos 之间的区别。因此，要么 jQuery 在其 swipeLeft 事件中公开 startPos 和 endPos 坐标，要么您必须连接自己的插件才能在 jQuery 之外完成此操作。
请添一些示例代码好吗？我知道这可能会略有不同，但我想以您的代码为基础开始:)
相关：stackoverflow.com/questions/3183872/… 和 stackoverflow.com/questions/4755505/…
还有：stackoverflow.com/questions/4992355/…
@Xavier：查看此处的链接forum.jquery.com/topic/touch-actions——寻找“概念证明”

标签： jquery-mobile

【解决方案1】：

我会推荐 Matt Bryson 的优秀 jQuery TouchSwipe 插件：http://labs.skinkers.com/touchSwipe/。

它具有 4 个方向和 1 或 2 个手指的触摸和滑动事件。它具有 SwipeStatus ，您可以通过它获得滑动距离：http://labs.skinkers.com/touchSwipe/demo/Swipe_status.html

【讨论】：

这些链接现在好像失效了

【解决方案2】：

不确定这是否有帮助，但他们在 Beta 2 中发布了一些额外的滑动功能

http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

添加了可配置的滑动事件阈值

在 jquery.mobile.event.js 刷卡代码。对于需要调整的开发人员这些常数允许更大的垂直位移并且仍然注册一个滑动，这个新功能允许他们进行调整。谢谢感谢 mlitwin 做出贡献。

scrollSupressionThreshold (default: 10px) – 超过这个水平位移，我们将抑制滚动

durationThreshold（默认值：1000 毫秒）- 比这更长的时间，而且不是滑动

horizontalDistanceThreshold (default: 30px) – 水平滑动位移一定不止于此。

verticalDistanceThreshold（默认值：75px）- 滑动垂直位移必须小于此值。

【讨论】：

最后我不得不在 jQuery Mobile 中编写一个自定义监听器，它会在开始点击 - 滑动和点击 - 滑动事件时触发。感谢您的提交。它让我从正确的地方开始。
np。您还可以分享您的自定义侦听器吗？也可以帮助别人

【解决方案3】：

我不知道如何从该方法中即时获取距离，因此我只是在我的页面上设置了一个新的全局阈值。

//Override the default horizontalDistanceThreshold of 30
$.event.special.swipe.horizontalDistanceThreshold = 200;

我使用的是旧版本的 jQM（仍然是 v1.0...），所以这可能已经改变。如果您刚开始寻找滑动事件，在源中很容易找到。

【讨论】：