javascript - touchmove 后 Touchend 不触发

Question

我正在尝试为移动设备制作一个页面，该页面检测 scrollTop 位置并在 scrollTop 低于文档高度的一半时滚动到页面顶部如果不是，则滚动到底部。

我已经通过使用这个实现了:

var ScrollTimeout;
$(window).on('scroll',function(){
    clearTimeout(ScrollTimeout);
    ScrollTimeout = setTimeout(scrollToTopOrBottom,200);
    });

问题是当用户停止滚动但手指仍在屏幕上时会触发超时。

然后我处理了 touchend 事件，它很棒。

$(document).on('touchend',function(){
    scrollToTop();
    });

用户可以停止滚动(手指仍在屏幕上)然后继续滚动而不触发 scrollToTopOrBottom() 函数。

问题是，该事件在浏览器之间不一致:

在某些浏览器(Maxthon 和 Android)中，touchend 事件按预期工作，但在 Opera Mobile 和 Chrome 中，touchend 事件不会触发。对此的解释是 touchend doesn't fires because touchcancel has been fired before .

我试过了

$(document).on('touchmove',function(e){
    e.preventDefault();
    });

并成功避免了touchcancel的触发，但不幸的是也避免了滚动的自然行为。

有人知道如何实现吗？我完全没有想法。

谢谢。

Answer 1

尝试在 touchend 和 touchcancel 上附加监听器。

$(document).on('touchend touchcancel', function() {
    doSomthing();
});