vue项目中监听手机物理返回键,js监听返回按钮,移动端,手机,

本文介绍了在Vue项目中如何监听并处理手机物理返回键,通过利用history和浏览器的popstate状态,在用户返回时弹出确认框,防止误操作。文章详细讲解了实现原理,并提供了具体的代码实现,包括监听的开启、关闭以及在不同场景下的适配策略。
摘要由CSDN通过智能技术生成

问题背景: 项目中用户总是可能误触到返回按钮,但此时可能并不希望返回,所以需要弹框进行确认操作。

在这里插入图片描述

原理:利用history 和 浏览器 刷新popstate状态 去实现

参考资料:https://blog.csdn.net/so12138/article/details/84250196

每一次返回都会去历史记录回退 -1 所以就在进入页面之前 往历史记录里面多记录一次当前页面的链接。然后再回退的时候监听刷新,去做一些事情。

1、挂载完成后,判断浏览器是否支持popstate

// BBBB.vue
mounted(){
   
  // 如果支持 popstate 一般移动端都支持了
  if (window.history && window.history.pushState) {
   
    // 往历史记录里面添加一条新的当前页面的url
    history.pushState(null, null, document.URL);
    // 给 popstate 绑定一个方法 监听页面刷新
    window.addEventListener('popstate', this.backChange, false);//false阻止默认事件
  }
},

2、页面销毁时,取消监听。否则其他vue路由页面也会被监听

// BBBB.vue
destroyed(){
   
  window.removeEventListener('popstate', this.backChange, false);//false阻止默认事件
},

3、将监听操作写在methods里面,removeEventListener取消监听内容必须跟开启监听保持一致,所以函数拿到methods里面写

methods:{
   
// BBBB.vue
  backChange() {
   
      
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值