javascript 触摸移动后触摸端不触发

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19088117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 14:17:58  来源:igfitidea点击:

Touchend not firing after touchmove

javascriptandroidjqueryscrolltouch

提问by Luisus

I'm trying to make a page for mobile devices that detects the scrollTopposition and scrolls to the top of the page if scrollTopis lower than half the document height or scroll to bottom if its not.

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

I have achieved that by using this:

我通过使用这个实现了这一点:

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

The problem is that the timeout fires when the user has stopped scrolling but still has the finger on the screen.

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

Then I worked with the touchendevent and it was great.

然后我参与了这个touchend活动,这很棒。

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

The user could stopped scrolling (with the finger still on the screen) and then continue scrolling without triggering the scrollToTopOrBottom()function.

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

The problem is, that event is incosistent between browsers:

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

In some browsers (Maxthon and Android), the touchendevent worked as intended but in Opera Mobile and Chrome, the touchendevent doesn't fires. The explanation for this is that touchenddoesn't fires because touchcancelhas been fired before.

在某些浏览器(Maxthon 和 Android)中,该touchend事件按预期工作,但在 Opera Mobile 和 Chrome 中,该touchend事件不会触发。对此的解释是touchend它不会触发,因为touchcancel之前已经被触发

I've tried this

我试过这个

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

and succesfully avoided the triggering of touchcancel, but unluckily also avoided the natural behaviour of scrolling.

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

Does anyone know how can this be achieved? I'm completely out of ideas.

有谁知道如何实现?我完全没有想法。

Thanks.

谢谢。

回答by dongseok0

try to attach listener on both touchend and touchcancel.

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

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

回答by tnt-rox

I wrote a shim to deal with this problem Probably a bit late for you but it might help someone. https://github.com/TNT-RoX/android-swipe-shim

我写了一个 shim 来处理这个问题 对你来说可能有点晚了,但它可能会对某人有所帮助。 https://github.com/TNT-RoX/android-swipe-shim