1、使用瀏覽器監聽切屏為例
此處為考慮瀏覽器兼容性推薦使用：document.addEventListener
1.1、正常函式使用如下：
let n = 0;
let max = 3; // 切屏最大次數
document.addEventListener("visibilitychange", function () {
if(document.visibilityState == 'hidden'){
n++;
} else if(document.visibilityState == 'visible') {
if (n > max) {
this.$alert('你已經切換離開考試頁面超過'+max+"次系統將自動提交答卷！", '警告', {
confirmButtonText: '知道了',
callback: action => {
this.msgSuccess("系統自動提交答卷！");
}
});
return;
}
this.$alert('你已經切換離開考試頁面'+n+'次，如果超過'+max+"次系統會自動提交答卷，請認真作答！", '警告', {
confirmButtonText: '知道了',
callback: action => {}
});
}
}); this.$alert()為vue的MessageBox彈框組件
運行后報：
提示this.$alert()不是一個函式
此時我們嘗試在document函式里面列印this到控制臺看看
console.log("this===",this);
控制臺輸出資訊：
指向的是呼叫addEventListener的物件
我們使用document物件去呼叫VueJS的組件函式肯定是行不通的，那么怎樣可以拿到VueJS的this呢？我們只需稍作修改
1.2、bind()系結事件指定函式
修改后的代碼如下：
let n = 0;
let max = 3; // 切屏最大次數
let fn = function () {
console.log("this===",this);
if(document.visibilityState == 'hidden'){
n++;
} else if(document.visibilityState == 'visible') {
if (n > max) {
this.$alert('你已經切換離開考試頁面超過'+max+"次系統將自動提交答卷！", '警告', {
confirmButtonText: '知道了',
callback: action => {
this.msgSuccess("系統自動提交答卷！");
}
});
return;
}
this.$alert('你已經切換離開考試頁面'+n+'次，如果超過'+max+"次系統會自動提交答卷，請認真作答！", '警告', {
confirmButtonText: '知道了',
callback: action => {}
});
}
}
// 使用bind系結的事件才是指向函式，否則指向的是呼叫addEventListener的物件
document.addEventListener("visibilitychange", fn.bind(this));詳解：
- 將觸發事件后執行的函式抽到外部，作為外部函式并賦予函式名
- 在事件中使用
函式名.bind('指定函式');即可在執行的函式中獲取到bind系結的指定函式
控制臺查看此時的this為
效果圖：
參考博文：https://www.jb51.net/article/253509.htm
無論風雨，和自己一決勝負吧轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540945.html
標籤：其他