1 回答

TA貢獻1865條經驗 獲得超7個贊
那是因為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);
}
}
添加回答
舉報