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

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

  方法一:

  直接在需要开发的页面引入fullpage,把所有内容装在fullpage的第一个页面中进行编辑,这样就由fullpage帮我们实现了屏蔽右划后退的事件。

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

  方法二:

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

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

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

  方法三:

  禁止左右划动手势

  CSS属性 touch-action (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移动端浏览器取消右划后退的几种方法的更多相关文章

  1. Chrome模拟手机浏览器(iOS/Android)的三种方法,亲测无误!

    大网站都有推出自己的手机访问版本页面,不管是新闻类还是视频网站,我们在电脑是无法直接访问到手机网站的,比如我经常访问一个3g.qq.com这个手机站点,如果在电脑上直接打开它,则会跳转到其它页面,一般 ...

  2. 用Fiddler可以设置浏览器的UA 和 手动 --Chrome模拟手机浏览器(iOS/Android)的三种方法,亲测无误!

    附加以一种软件的方法是:用Fiddler可以设置浏览器的UA 以下3种方法是手动的 通过伪装User-Agent,将浏览器模拟成Android设备. 第一种方法:新建Chrome快捷方式 右击桌面上的 ...

  3. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  4. Clipboard.js : 移动端浏览器实现网页内容复制

    .bl { padding: 5px 10px; border-left: 3px solid #009a61; background: #f6f6f6; color: #555; font-size ...

  5. js常用代码示例及解决跨域的几种方法

    1.阻止默认行为 // 原生js document.getElementById('btn').addEventListener('click', function (event) { event = ...

  6. jquery/js/a标签实现当前页面跳转的两种方法

    在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处 有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前 ...

  7. JS监听浏览器的返回、后退、上一页按钮的事件方法

    在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等 ...

  8. eclipse上修改js后,浏览器上还是出现原来效果的解决方法

    废话不多说,直接上方法: 1.最简单的是清除浏览器缓存.2.换个浏览器试试.3.修改js文件名,换成别的名称,再引用.4.重启eclipse.5.重启电脑.

  9. js | javascript实现浏览器窗口大小被改变时触发事件的方法

    转载 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信息: 代 ...

随机推荐

  1. phpmyadmin数据库密码的设置

    用phpMyAdmin修改mysql数据库密码   修改mysql数据库密码方法有很多,这里向大家演示一种比较简单的方法,利用phpMyAdmin修改.   工具/原料 phpMyAdmin软件 my ...

  2. Spring boot 学习八 Springboot的filter

    一:  传统的javaEE增加Filter是在web.xml中配置,如以下代码: <filter> <filter-name>TestFilter</filter-nam ...

  3. bzoj4453

    单调栈+set+后缀数组 一道奇妙的题 这道题如果对于每个询问$r$是固定的,那么就很简单了,可惜并不是 由于r会变化,那么对于两个子串$[i...r],[j...r]$,他们的大小关系随着r的变化也 ...

  4. ubuntu在recovery模式下更改用户密码

    http://www.jb51.net/os/Ubuntu/164636.html 1, restart 2, Hold down shift key / press and hold 3, sele ...

  5. Http协议-概要

    Http协议(超文本传输协议)是位于TCP/IP结构中的应用层的一种传输协议,规定了万维网服务器之间相互通信的规则.比如比较常见的Web浏览器客户端与应用服务器的通信!万维网服务器之间互相通信的时候往 ...

  6. Uncommon Words from Two Sentences

    https://leetcode.com/problems/uncommon-words-from-two-sentences We are given two sentences A and B.  ...

  7. JavaScript代码放在HTML代码不同位置的差别

    通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一 ...

  8. jdbcTemplate简单使用

    package com.bizvane.spider.tools; import org.apache.commons.dbcp.BasicDataSource; import org.springf ...

  9. 在 WinForm/WPF 下制作 Google Material Design 风格程序

    国内社区没有,顺手转.WinForm: https://github.com/IgnaceMaes/MaterialSkin演示:https://www.youtube.com/watch?v=A8o ...

  10. Python 绘制你想要的数学函数图形

    Python 非常热门,但除非工作需要没有刻意去了解更多,直到有个函数图要绘制,想起了它.结果发现,完全用不着明白什么是编程,就可以使用它完成很多数学函数图的绘制. 通过以下两个步骤,就可以进行数学函 ...