F7+vue 物理返回键监听使用

蔚落 2022-06-05 11:57 292阅读 0赞

[F7+vue 物理返回键监听使用][F7_vue]

以前使用的是纯F7,这个项目加了Vue进去，但碰到了一个问题，就是这样监听不到安卓物理键的返回，它是点击返回，直接推出程序，这个坑有点深，查了不少资料也问了不少人，最后在网上看到了别人的写的，自己也改了一点，最后可以返回，但是不能直接退出，坑还是没有爬完：上代码：

![复制代码][copycode.gif]

var XBack = {};
        (function(XBack) {
            XBack.STATE = 'x - back';
            XBack.element;
    
            XBack.onPopState = function(event) {
                event.state === XBack.STATE && XBack.fire();
                XBack.record(XBack.STATE); //初始化事件时，push一下  
                 
            };
    
            XBack.record = function(state) {
                history.pushState(state, null, location.href);
    
            };
    
            XBack.fire = function() {
                var event = document.createEvent('Events');
                event.initEvent(XBack.STATE, false, false);
                XBack.element.dispatchEvent(event);
                  
            };
    
            XBack.listen = function(listener) {
                XBack.element.addEventListener(XBack.STATE, listener, false);
            };
    
            XBack.init = function() {
                XBack.element = document.createElement('span');
                window.addEventListener('popstate', XBack.onPopState);
                XBack.record(XBack.STATE);
                
            };
    
        })(XBack); // 引入这段js文件  
        XBack.init();
     　　mounted() {
    　　　　　　var $_this = this;
                XBack.listen(function() {
                    $_this.$router.back()
                });  
    　　}，
    
    这段代码放在入口页就可以了

[F7_vue]: http://www.cnblogs.com/MyIsLu/p/7607728.html
[copycode.gif]: /images/20220605/d885aa29455d48379a3ba2d6388a955d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，292人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue】监听Enter键

目录一、@keydown.enter 1、使用@keydown.enter指令 2、在@keydown事件处理函数中检查按下的键二、@keyup.enter.nat

迈不过友情╰/ 2024年03月03日 08:06/ 0 赞/ 92 阅读

相关 JS监听手机返回键

//当点击返回键时，返回到上上页 function onBackGoHistory(){ pushHistory(); window.add

深碍√TFBOYSˉ_/ 2023年05月29日 02:29/ 0 赞/ 14 阅读

相关 vue 返回键监听返

遇到个需求，下完单跳转成功页面，此时返回需要回首页，页面有返回按钮但怕用户此时点返回键就监听不到了。用了destroy方法中使用$router.push 发现不管用

逃离我推掉我的手/ 2023年01月06日 01:57/ 0 赞/ 167 阅读

相关物理返回键事件处理

物理返回键 1）app内：在app1上，H5和app约定好在window对象上定义一个全局的方法，比如window.back方法，H5会在路由定义位置，定义该方法。当触

曾经终败给现在/ 2022年12月21日 04:54/ 0 赞/ 202 阅读

相关 Android Fragment 监听物理返回 back 键

在很多场景下，我们需要 Fragment 监听物理 back 键，而不是 Activity，这个时候我们只能做一些处理，来让 Fragment 拦截。首先在 Fragmen

Bertha 。/ 2022年12月08日 14:08/ 0 赞/ 521 阅读

相关 android 返回键的监听

@Override public boolean onKeyDown(int keyCode, KeyEvent event) { if

比眉伴天荒/ 2022年09月25日 03:28/ 0 赞/ 202 阅读

相关 F7+vue 物理返回键监听使用

[F7+vue 物理返回键监听使用][F7_vue] 以前使用的是纯F7,这个项目加了Vue进去，但碰到了一个问题，就是这样监听不到安卓物理键的返回，它是点击返回，直接推出程

蔚落/ 2022年06月05日 11:57/ 0 赞/ 293 阅读

相关监听Home键和返回键

创建homereceiver import android.content.BroadcastReceiver; import android.con

淩亂°似流年/ 2022年05月31日 07:53/ 0 赞/ 310 阅读

相关 vue 移动端物理返回键

柚子写过一个Vue的移动端项目，当时遇到一个问题，就是按手机上的自带的物理返回按钮时，会直接退出应用程序，后来百度了一些关于手机物理返回键的文章，也终于是解决了，

雨点打透心脏的1/2处/ 2022年01月15日 00:39/ 0 赞/ 461 阅读

相关 react native监听物理返回键和沉浸式状态栏

监听物理返回键：首先定义全局参数： var lastBackPressed; var current = true;

绝地灬酷狼/ 2021年09月17日 03:14/ 0 赞/ 627 阅读