防考試作弊切屏

方法一：監聽頁面失焦聚焦事件：防止任何操作

• 監聽考試頁面失焦事件記錄切出時間
• 頁面聚焦時累積記錄切入時間，累積時間大于1分鐘自動交卷并移除時間
• 頁面銷毀移出事件
• ***bug：必須把事件回調定義為方法，在銷毀的時候才可以銷毀

 mounted() {window.addEventListener('blur', this.blurDom);window.addEventListener('focus', this.focusDom);},destroyed() {console.log(1111111, '頁面銷毀')window.removeEventListener('blur', this.blurDom)window.removeEventListener('focus', this.focusDom)},methods: {blurDom() {this.start = Date.now()console.log(1111111, '失去焦點', this.start)},focusDom() {if (this.start == 0) returnthis.end = Date.now()this.hideTime += this.end - this.startconsole.log(1111111, '頁面聚焦', this.end, this.hideTime)if (this.hideTime > 1 * 60 * 1000) {console.log('沒機會了')this.hilarity(1)window.removeEventListener('blur', this.blurDom)window.removeEventListener('focus', this.focusDom)} else {this.$message.warning('切屏時間超過' + this.setTime + '分鐘自動交卷');}},}

方法二：監聽頁面顯示隱藏方法：只能監聽頁面被全部覆蓋的情況，小窗口監聽不到

• 監聽考試頁面隱藏記錄切出時間
• 頁面顯示時累積記錄切入時間，累積時間大于1分鐘自動交卷并移除時間
• 頁面銷毀移出事件
• ***bug：必須把事件回調定義為方法，在銷毀的時候才可以銷毀

 mounted() {document.addEventListener("visibilitychange", this.watchDom);},destroyed() {console.log(1111111, '頁面銷毀')document.removeEventListener("visibilitychange", this.watchDom) },methods: {watchDom() {if (document.visibilityState == 'hidden') {this.start = Date.now()console.log(1111111, 'start', this.start, this.hideTime)} else {this.end = Date.now()this.hideTime += this.end - this.startconsole.log(1111111, 'end', this.end, this.end - this.start, this.hideTime)if (this.hideTime > 1 * 60 * 1000) {this.hilarity(1)document.removeEventListener("visibilitychange", this.watchDom) } else {this.$message.warning('切屏時間超過' + this.setTime + '分鐘將自動交卷');}}},}