Javascript 检测用户是否离开选项卡，Vuejs

我找到了一个很好的例子，看起来很适合我的需要，我尝试在我的

Vuejs

应用程序中实现它，但到目前为止，没有检测到该代码的任何更改和错误

data() {
    return {
      tabFocus:false,
    }
}

created() {
  this.detectFocusOut();
},

watch:{
    tabFocus(value) {
      console.log("New value:", value);
    },
}

 methods:{
    detectFocusOut() {
      console.log("It is here");
      var inView = false;
      window.onfocus = window.onblur = window.onpageshow = window.onpagehide = function(
        e
      ) {
        if ({ focus: 1, pageshow: 1 }[e.type]) {
          if (inView) return;
          this.tabFocus = true;
          inView = true;
        } else if (inView) {
          this.tabFocus = !this.tabFocus;
          inView = false;
        }
      };
    },
}

---

这是因为分配给

窗口.onfocus

等的函数中的

this

不是指VueJS应用程序本身，而是指

窗口

对象。如果将其转换为箭头函数，则应能正常工作：

methods:{
    detectFocusOut() {
        console.log("It is here");
        var inView = false;
        window.onfocus = window.onblur = window.onpageshow = window.onpagehide = (e) => {
            if ({ focus: 1, pageshow: 1 }[e.type]) {
                if (inView) return;
                this.tabFocus = true;
                inView = true;
            } else if (inView) {
                this.tabFocus = !this.tabFocus;
                inView = false;
            }
        };
    },
}

就个人而言，我建议不要使用菊花链。您可以简单地将所有逻辑抽象为一个函数：

methods:{
    detectFocusOut() {
        let inView = false;

        const onWindowFocusChange = (e) => {
            if ({ focus: 1, pageshow: 1 }[e.type]) {
                if (inView) return;
                this.tabFocus = true;
                inView = true;
            } else if (inView) {
                this.tabFocus = !this.tabFocus;
                inView = false;
            }
        };

        window.addEventListener('focus', onWindowFocusChange);
        window.addEventListener('blur', onWindowFocusChange);
        window.addEventListener('pageshow', onWindowFocusChange);
        window.addEventListener('pagehide', onWindowFocusChange);
    }
}

---

这是因为分配给

窗口.onfocus

等的函数中的

this

不是指VueJS应用程序本身，而是指

窗口

对象。如果将其转换为箭头函数，则应能正常工作：

methods:{
    detectFocusOut() {
        console.log("It is here");
        var inView = false;
        window.onfocus = window.onblur = window.onpageshow = window.onpagehide = (e) => {
            if ({ focus: 1, pageshow: 1 }[e.type]) {
                if (inView) return;
                this.tabFocus = true;
                inView = true;
            } else if (inView) {
                this.tabFocus = !this.tabFocus;
                inView = false;
            }
        };
    },
}

就个人而言，我建议不要使用菊花链。您可以简单地将所有逻辑抽象为一个函数：

methods:{
    detectFocusOut() {
        let inView = false;

        const onWindowFocusChange = (e) => {
            if ({ focus: 1, pageshow: 1 }[e.type]) {
                if (inView) return;
                this.tabFocus = true;
                inView = true;
            } else if (inView) {
                this.tabFocus = !this.tabFocus;
                inView = false;
            }
        };

        window.addEventListener('focus', onWindowFocusChange);
        window.addEventListener('blur', onWindowFocusChange);
        window.addEventListener('pageshow', onWindowFocusChange);
        window.addEventListener('pagehide', onWindowFocusChange);
    }
}

---

@没问题：很高兴能够help@Beusebiu没问题：很高兴能帮忙