Question

我正在尝试为移动应用程序实现可滚动元素，看起来您必须在初始touchStart事件中使用preventDefault，否则浏览器将不会触发所有touchMove事件（可能是出于性能原因）。

所以看起来如果我想允许在溢出元素上进行触摸滚动，则用户将无法像往常一样在触摸该元素时滚动页面。如果overflown元素占据视口的大部分，则会出现问题。

这是他们的解决方法吗？

Answer 1

看看这个图书馆

http://api.mutado.com/mobile/mtdtouch/js/

“核心”javascript包括针对触摸事件（webkit）优化的基本UIComponent。示例中的UI.Scroll组件为您管理“防止默认问题”。

尝试子类化UIComponent并像这样实现自己的事件处理程序

$MTD.YourOwnComponent = $.klass( $MTD.UIComponent, {    

    touchesBegan: function( e ) {
        // your stuff
    },

    touchesMoved: function( e ) {
        // your stuff   
    },

    touchesEnded: function( e ) {
        // your stuff
    }

});

希望这有帮助。

Answer 2

以下是一个简单的解决方法：删除touchstart处理程序。您只需使用touchmove，touchend和touchleaving处理程序即可重建大部分内容。

在我使用（Chrome）测试的浏览器中，只要您没有touchstart处理程序，就会进行滚动;它并不关心其他的。只要您没有在ev.preventDefault处理程序中主动调用touchmove，滚动就会起作用。

假设你想要做的事情会很好，尽管只是在手指开始移动时发现触摸，而不是手指最初落地时，这种解决方法应该可以接受。

...而且我还假设其他浏览器使用与Chrome相同的逻辑。

听javascript触摸事件但仍允许默认滚动行为

2 个答案: