检测 touchstart/touchend 是否取消了滚动（动量滚动）答案

【问题标题】：detect if a touchstart/touchend has cancelled a scroll (momentum scroll)检测 touchstart/touchend 是否取消了滚动（动量滚动）
【发布时间】：2015-01-18 08:27:17
【问题描述】：

我会监听 touchstart 和 touchend 事件，以使我的应用对移动设备的响应更加灵敏。

问题是，如果您“轻弹滚动”（即使手指离开屏幕后页面仍在滚动），然后通过点击停止滚动 - 如果在您点击的元素上附加了 touchend 事件，它会开火。

我需要一种方法来检测 touchstart 或 touchend 是否已停止滚动，以便我可以停止任何事件触发。

我尝试在滚动上设置一个变量（我注意到移动设备上的滚动事件仅在滚动完成后触发，即即使在动量滚动时页面也已停止）：

$(window).scroll(function(){
    cancelled_scrolling = true;
    setTimeout(function(){
        cancelled_scrolling = false;
    },200);
});

但是，当我点击时，似乎 touchend 在 .scroll() 事件之前触发，因为这不起作用：

$('body').on('touchend', function(){

    if(cancelled_scrolling){
        alert('ahahahah');
        return false;
    }

    //code to trigger events depending on event.target after here
});

我怎样才能做到这一点？

编辑：

找到了答案 -

step1 - 在 touchend 上保存 scrollTop step2 - 在 touchstart 上，根据新的 scrollTop 检查保存的 scrollTop

如果它们不匹配，即使在 touchend 事件发生后页面也会滚动

【问题讨论】：

相关解决方案：stackoverflow.com/questions/13812936/…

标签： javascript jquery mobile

【解决方案1】：

在touchStart 上，跟踪每个父节点的scrollTop 和scrollLeft。在touchMove 上，检查这些值是否已更改。如果是这样，请取消触摸。这比只检查touchEnd 稍微好一点，因为他们可能滚动了页面然后又取消了滚动。

你也可以在这里看到这个逻辑的实现：https://github.com/JedWatson/react-tappable/blob/cf755ea0ba4e90dfa6ac970316ff7c35633062bd/src/TappableMixin.js#L120

【讨论】：