Question

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

问题是，如果你轻弹滚动＆＃39; （即使在手指离开屏幕后页面仍然滚动），然后点击停止滚动 - 如果在你敲击的元素上附有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上保存scrollTop step2 - 在touchstart上，针对新的scrollTop检查已保存的scrollTop

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

Answer 1

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

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

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

1 个答案: