javascript - 检测 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步 - 将scrollTop保存在touchend上第2步 - 在 touchstart 上，检查保存的scrollTop与新的scrollTop

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

Answer 1

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

您还可以在此处查看此逻辑的实现:https://github.com/JedWatson/react-tappable/blob/cf755ea0ba4e90dfa6ac970316ff7c35633062bd/src/TappableMixin.js#L120