[转]JS移动端浏览器取消右划后退的几种方法

在开发过程中,发现我们公司所使用的APP有点BUG,在APP中打开网页、H5应用之后,处于首页时,轻微的右划触发了后退事件,导致直接退出网页或者H5应用的页面,这样使得很多需要交互的手势没办法使用。本来这个右划后退事件是不应该出现在第一页的,这个BUG也应该由APP得开发来解决,不过当时这个APP是外包做的,如果更改这些比较麻烦,因此解决问题的任务就由我来了。

  在使用某些JS插件(fullpage、swipe等)的时候,我发现这些插件使用过程中居然屏蔽掉了这个事件,这也给了我信心,于是我开始了尝试。

  方法一:

var mo=function(e){e.preventDefault();}

/***禁止滑动***/

function stop(){
document.addEventListener("touchmove",mo,false);//禁止页面滑动

}
stop()

  


  这个方法最简单最暴力,适用于单页面的简单应用。

  方法二:

  直接屏蔽掉浏览器的后退事件。

<script language="javascript">
//防止页面后退
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
</script>

  



  这页面中引入这段JS后,一切后退事件都会失效,包括APP顶部自带的那个后退按钮,因此需要慎用。

  方法三:

  禁止左右划动手势

  CSS属性 de style=”margin: 0px; padding: 0px;” >touch-actionde> (touch-action详解)用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动、缩放等)。设置html的touch-action:pan-y,即启用单指垂直平移手势,然而这个方法在PC端模拟的时候可以,在移动端使用的时候却失效。
  方法四:

  阻止touchmove事件传递,再通过scrollTop来使页面上下滚动

<script language="javascript">
let self = this;
document.addEventListener('touchstart', function (e) {
self.moveY = e.targetTouches[0].pageY;
})
document.addEventListener('touchmove', function (e){
e.preventDefault();
let moveWidth = self.moveY - e.targetTouches[0].pageY;
if (moveWidth !== 0) {
document.body.scrollTop += moveWidth;
}
})
document.addEventListener('touchmove', function (e) {
e.preventDefault();
})
</script>

  


  这个方法基本已经完美解决了这个问题,只是上下滑动过程中感觉画面渲染有一点点失真,不知道是不是心理作用

  方法五:

  使用Iscroll

  这个插件包含了很多滑动的方法,对于移动端也很友好,用作移动端的页面滑动,效果也可以媲美原生,学习起来也很快。

 

 

转自:https://blog.csdn.net/feifanzhuli/java/article/details/78791033

posted @ 2020-07-17 14:39  Sameen  阅读(178)  评论(0编辑  收藏