H5 中阻止浏览器前进后退手势

怎么阻止在 H5 浏览器中水平滑动页面时，页面后退或者前进？

EN

Android 端：

关键代码：

<style>
    html {
        touch-action: none;
    }
</style>

加入你的网页由滑块验证码的时候，当用户在滑动滑块进行验证时，如果没有阻止浏览器的水平方向滑动后退手势，那用户在操作的时候就会返回上一级页面。

要阻止这种情况只需禁用掉浏览器默认的手势就行了。

touch-action 的作用就是禁用掉这个效果，它的解释是：

Determines whether touch input may trigger default behavior supplied by user agent.

决定触摸操作是否触发浏览器默认的用户代理行为（user agent）。

iOS 端：

给滑动的父元素设置 touchmove 事件，然后阻止事件的默认行为：

container.addEventListener('touchmove', function(e) {
    // other code...
    e.preventDefault();
})