检测触摸开始/触摸结束是否取消了滚动(动量滚动）

detect if a touchstart/touchend has cancelled a scroll (momentum scroll)

本文关键字：滚动 触摸 取消 开始 结束 是否 检测      更新时间：2023-09-26

我侦听TouchStart和Touchend事件，以使我的应用程序对移动设备的响应更快。

问题是，如果您"轻拂滚动"（即使手指离开屏幕，页面仍在滚动），然后点击停止滚动 - 如果 touchend 上有一个事件附加到您点击的元素，它将触发。

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

我

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

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

但是，当我点击时，触摸端似乎在 .scroll（） 事件之前触发，因为这不起作用：

$('body').on('touchend', function(){
    if(cancelled_scrolling){
        alert('ahahahah');
        return false;
    }
    //code to trigger events depending on event.target after here
});

我怎样才能做到这一点？

编辑：

找到了答案——

步骤1 - 保存滚动顶部触摸端步骤2 - 在触摸启动时，检查保存的滚动顶部与新的滚动顶部

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

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

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

相关文章：