首页 新闻 搜索 专区 学院

vue有没有办法监听 浏览器地址栏回车

0
[已解决问题] 解决于 2022-09-04 10:26

就这里敲回车的时候如何检测

木兰当户织的主页 木兰当户织 | 小虾三级 | 园豆:1507
提问于:2022-08-30 20:19

你监听这个的目的是什么

默卿 5个月前

@默卿: 如果在这里回车了,就要先提示 一个confirm

敲代码挣彩礼 5个月前
< >
分享
最佳答案
0

没找到最终实现方案 ,伪代码

看到一篇文章 说是判断 两次时间差来对比,,大于多少毫秒就是刷新,否则就是关闭页面重新打开,没啥效果


  setup() {
    const tabStore = useMultipleTabStore()
      const gap_time = ref(0)
      const beforeUnload_time = ref(0)
    // 关闭窗口之前执行
    const  beforeunloadHandler  =(event:Event)=> {
      event.preventDefault();
      event.returnValue = true
      beforeUnload_time.value = new Date().getTime();
    }
    const unloadHandler =(event:any)=>{
      gap_time.value = new Date().getTime() - beforeUnload_time.value;
      //判断是窗口关闭还是刷新 毫秒数判断 
      if (gap_time.value <= 10) {
    // 退出登录接口 这里应当换为个人的登出方法

      }
    }
  
  onUnmounted(()=>{
     // 移除监听
    window.removeEventListener("beforeunload", (event)=>beforeunloadHandler(event))
  })
  onMounted(()=>{
     // 监听浏览器关闭
       window.addEventListener('unload', (event)=>unloadHandler(event))
      window.addEventListener("beforeunload", (event)=>beforeunloadHandler(event) );
      
  })

}
})

木兰当户织 | 小虾三级 |园豆:1507 | 2022-09-04 10:26
其他回答(3)
0

监听enter键点击事件,这样行吗?

人间春风意 | 园豆:1607 (小虾三级) | 2022-08-31 08:16

@人间春风意: 浏览器导航栏的搜索框没法检测到~~~

支持(0) 反对(0) 木兰当户织 | 园豆:1507 (小虾三级) | 2022-08-31 09:51

@敲代码挣彩礼: 实在不行,看你是兼容所有浏览器,还是特定浏览器,如果你的前端是全局的,应该可以根据对应的id或class获取到元素,监听元素的点击事件,但是如果浏览器要兼容很多种,那我建议换一个实现需求的思路
你的需求是什么?

支持(0) 反对(0) 人间春风意 | 园豆:1607 (小虾三级) | 2022-08-31 09:54

@人间春风意: 我说一下吧,就是 主管需求: 不管什么方式, 就是用户在浏览器有刷新这样的操作,就必须提前出来
比如f5 刷新


浏览器刷新按钮

回车刷新,这里之前都要弹窗二次确认

支持(0) 反对(0) 木兰当户织 | 园豆:1507 (小虾三级) | 2022-08-31 10:05

@敲代码挣彩礼: 按键只能监听到,enter,和 f5
可以看看window的刷新监听方法
https://blog.csdn.net/weixin_42987525/article/details/126309805

支持(0) 反对(0) 人间春风意 | 园豆:1607 (小虾三级) | 2022-08-31 13:10

@人间春风意: 谢谢了, md 我躺牌了

支持(0) 反对(0) 木兰当户织 | 园豆:1507 (小虾三级) | 2022-09-04 10:27
0

https://blog.51cto.com/u_15275953/5131733
这个例子可以实现在编辑页面上的div时,如果此时再去刷新页面,会有是否重新加载的提示,不知道是否满足你的需求

默卿 | 园豆:6410 (大侠五级) | 2022-08-31 10:43
0

你主管这是想拿公交车当私家车用呢

编程非我意 | 园豆:220 (菜鸟二级) | 2022-08-31 11:33
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册