防考试作弊切屏
方法一：监听页面失焦聚焦事件：防止任何操作
- 监听考试页面失焦事件记录切出时间
- 页面聚焦时累积记录切入时间，累积时间大于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 + '分钟将自动交卷');}}},}
