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

Question

我找到了一个很好的例子here这看起来符合我的需要，我尝试在我的 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;
        }
      };
    },
}

Answer 1

这是因为分配给window.onfocus等的函数中的this并不是指VueJS应用程序本身，而是指window 对象。如果将其转换为箭头函数，它应该可以工作:

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);
    }
}