检测触摸事件(touchstart/touchend)是否取消了滚动(惯性滚动)。

Question

我在我的应用程序中监听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
});

我该如何实现这个功能？

编辑：

找到了解决方案 -

步骤1 - 在touchend事件上保存scrollTop 步骤2 - 在touchstart事件上，检查保存的scrollTop是否与新的scrollTop相匹配

• 如果它们不匹配，则表示在touchend事件发生后页面被滚动了

- rpsep2

---

相关解决方案：https://dev59.com/UGvXa4cB1Zd3GeqPOO2O - undefined

Answer 1

在 touchStart 事件中，跟踪每个父节点的 scrollTop 和 scrollLeft 值。在 touchMove 事件中，检查这些值是否发生了变化。如果是，取消触摸操作。相比只在 touchEnd 事件中检查，这种方式稍微好一些，因为可能用户先滚动页面然后再回滚。

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

- Andrew Rasmussen