vue项目中监听手机物理返回键的实现


Posted in Javascript onJanuary 18, 2020

背景:项目中有一个场景要监听android手机物理返回键,但是app和js的中间件又没提供这个事件的监听,只能百度纯js实现了

第一步:

xback.js

;!function(pkg, undefined){
 var STATE = 'x-back';
 var element;
 var onPopState = function(event){
  event.state === STATE && fire();
 }
 var record = function(state){
  history.pushState(state, null, location.href);
 }
 var fire = function(){
  var event = document.createEvent('Events');
  event.initEvent(STATE, false, false);
  element.dispatchEvent(event);
 }
 var listen = function(listener){
   element.addEventListener(STATE, listener, false);
  }
 ;!function(){
  element = document.createElement('span');
  window.addEventListener('popstate', onPopState);
  this.listen = listen;
  this.record = record(STATE);
  record(STATE);
 }.call(window[pkg] = window[pkg] || {});
}('XBack');

第二步:

加载xback.js文件

<remote-script src="../js/xback.js" @load="loadXBack"></remote-script>

自定义组件remote-script可以参考我另外的一篇文章:https://3water.com/article/178777.htm

第三步:

监听返回键事件

methods: {
  // JavaScript监听手机物理返回键
   loadXBack () {
    window.XBack.listen(() => {
     this.dialog = this.$createDialog({
      type: 'confirm',
      content: `确定返回吗?`,
      confirmButton: {
       text: '确定',
       active: true,
       disabled: false
      },
      cancelButton: {
       text: '取消',
       active: false,
       disabled: false
      },
      onConfirm: () => {
       this.dialog.hide()
       this.close()
      },
      onCancel: () => {
       this.dialog.hide()
       window.history.pushState('x-back', null, window.location.href)
      }
     })
     this.dialog.show()
    })
   },
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
vue组件内部引入外部js文件的方法
Jan 18 #Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 #Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 #Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 #Javascript
JS数组方法slice()用法实例分析
Jan 18 #Javascript
JS实现横向轮播图(中级版)
Jan 18 #Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 #Javascript
You might like
常用星际术语索引(新手指南)
2020/03/04 星际争霸
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
python中__call__方法示例分析
2014/10/11 Python
使用python3实现操作串口详解
2019/01/01 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
计算机本科生自荐信
2013/10/15 职场文书
秘书岗位职责
2013/11/18 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
消防安全月活动总结
2015/05/08 职场文书
心灵捕手观后感
2015/06/02 职场文书
医院消毒隔离制度
2015/08/05 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏