JS移动端浏览器取消右划后退的几种方法
来源:互联网 发布:xp装linux双系统 编辑:程序博客网 时间:2024/04/27 20:24
在开发过程中,发现我们公司所使用的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(学习地址)
这个插件包含了很多滑动的方法,对于移动端也很友好,用作移动端的页面滑动,效果也可以媲美原生,学习起来也很快。
- JS移动端浏览器取消右划后退的几种方法
- 取消物理后退键的2种方法
- JS监听手机端浏览器的后退按钮的事件方法
- JS监听手机端浏览器的后退按钮的事件方法
- 防止点击浏览器后退按钮 后退页面的js
- JS执行浏览器的后退按钮
- 利用js禁用浏览器的后退操作
- JS控制浏览器导航的几种方法
- JS控制浏览器导航的几种方法
- js清除浏览器缓存的几种方法
- js清除浏览器缓存的几种方法
- js清除浏览器缓存的几种方法
- js清除浏览器缓存的几种方法
- js清除浏览器缓存的几种方法
- js清除浏览器缓存的几种方法
- js,清除浏览器缓存的几种方法
- 清除浏览器缓存js文件的几种方法
- 清除浏览器缓存js文件的几种方法
- IIC和SPI通信
- Android控件设置篇
- 超实用总结:AI实践者需要用到的10个深度学习方法
- 上海走美杯报名时间、流程及费用
- CAD输出图至Word
- JS移动端浏览器取消右划后退的几种方法
- @XmlAccessorType使用
- [Python]socket简易服务端客户端通信
- MySQL 5.6 my.cnf 参数记录
- 【人工智能工程师】掌握这10个项目,秒杀90%面试者!
- 草根站长故事之:我的业余站长之路(中)
- C++笔记
- IDEA module
- mongodb小结