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

我倾听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 step2上保存scrollTop – 在touchstart上，检查已保存的scrollTop对新的scrollTop

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

Answer 1

在touchStart ，跟踪每个父节点的scrollTop和scrollLeft 。 在touchMove ，检查这些值是否已更改。 如果是，请取消触摸。 这比仅仅检查touchEnd要好一些，因为它们可能会滚动页面然后取消注册。

您还可以在此处看到此逻辑： https ： //github.com/JedWatson/react-tappable/blob/cf755ea0ba4e90dfa6ac970316ff7c35633062bd/src/TappableMixin.js#L120