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;
}
};
},
}
解决方案
那是因为this
分配给window.onfocus
等的函数中的 不是指 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);
}
}