检测touchstart / touchend是否取消了滚动（动量滚动） [英] detect if a touchstart/touchend has cancelled a scroll (momentum scroll)

问题描述

我倾听touchstart和touchend事件，让我的应用程序对移动设备更具响应性。

i listen for touchstart and touchend events to make my app more responsive for mobile.

问题是，如果你轻弹滚动（页面仍在滚动甚至在手指离开屏幕后），然后用水龙头停止滚动 - 如果在你敲击的元素上附有touchend的事件，它将会触发。

the problem is, if you 'flick scroll' (the page is still scrolling even after finger has left screen), and then stop the scroll with a tap - if there is an event on touchend attached to the element you tapped, it will fire.

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

I need a way to detect if the touchstart or touchend has stopped a scroll, so i can stop any events firing.

我尝试在滚动上设置变量（我注意到滚动滚动完成后，手机上的事件才会触发，即即使在动量滚动时页面也已停止）：

I tried setting a variable on scroll (i noticed scroll event on mobile only fires after scroll has finished, i.e page has stopped even on momentum scrolling):

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

然而，当我点击它时，似乎touchend会在.scroll（）事件之前触发，因为这不会工作：

however, when i tap it seems the touchend fires before the .scroll() event, as this doesn't work:

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

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

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

我该如何实现？

编辑：

找到了答案 -

step1 - 保存scrollTop on touchend
step2 - 在touchstart上，检查已保存的scrollTop对新的scrollTop

step1 - save the scrollTop on touchend step2 - on touchstart, check the saved scrollTop against a new scrollTop

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

推荐答案

在 touchStart ，跟踪每个父节点的 scrollTop 和 scrollLeft 。在 touchMove 上，检查是否有任何这些值发生了变化。如果是，请取消触摸。这比仅仅检查 touchEnd 要好一些，因为他们可能会滚动页面然后取消注册。

On touchStart, keep track of the scrollTop and scrollLeft for each parent node. On touchMove, check if any of these values have changed. If so, cancel the touch. This is slightly better than just checking on touchEnd because maybe they scrolled the page and then unscrolled.

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

You can also see this logic implemented here: https://github.com/JedWatson/react-tappable/blob/cf755ea0ba4e90dfa6ac970316ff7c35633062bd/src/TappableMixin.js#L120

这篇关于检测touchstart / touchend是否取消了滚动（动量滚动）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！