正好碰到有业务踩到此坑做个笔记,当URL不跳转,但是又会进入另一个页面,但是此时用户按了返回键却直接退出了,所以要阻止默认事件,自己处理相应逻辑
或者在做登录的时候,从A→B→C,我需要从C直接回到A而不经过B,这个时候,就要拦截返回键自己来定义事件
解决方法是找到安卓返回键的事件,然后阻止掉它,并且指定返回的路径,代码如下:
1 2 3 4 5 6 7 |
// 页面载入时使用pushState插入一条历史记录 history.pushState(null, null, location.href); // 拦截安卓回退按钮(监听到返回事件) window.addEventListener('popstate', function (event) { history.pushState(null, null, location.href); //此处加入回退时你要执行的代码 }); |
其中location.href会自动获取到当前路径的url,添加到历史记录,然后每次点击都会先加入一次历史记录,然后再加入一次防止下次返回键触碰失效
好了,这样就能实现一种你想不让这个页面用户自己回退,或者返回键执行响应的方法,那么这个方法就很简单了。
ps:这个功能仅支持app中的,不带后退按钮的浏览器,也就是说页面中的返回按钮是我们自己写的事件那种。
以下是vue框架内的阻止默认事件使用方法,和正常使用JS区别不大
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
mounted() { // 按需使用:A→B→C就需要页面一进来的时候,就添加一个历史记录 window.history.pushState(null, null, document.URL); // 给window添加一个popstate事件,拦截返回键,执行this.onBrowserBack事件,addEventListener需要指向一个方法 window.addEventListener("popstate", this.onBrowserBack, false); }, destroyed() { // 当页面销毁必须要移除这个事件,vue不刷新页面,不移除会重复执行这个事件 window.removeEventListener("popstate", this.onBrowserBack, false); }, watch: { // 弹框监听,当弹框显示的时候,pushState添加一个历史,供返回键使用 PopupShow: { handler(newVal, oldVal) { if (newVal.Terms === true) { window.history.pushState(null, null, document.URL); } }, deep: true } }, methods: { onBrowserBack() { // 这里写点击返回键时候的事件 // 比如判断需求执行back()或者go(-2)或者PopupShow=false隐藏弹框 } } |