js利用网页失焦事件防切屏，但是ckeditor插件会触发失焦事件，如何对敌？

Question

js利用网页失焦事件防切屏，但是ckeditor插件会触发失焦事件，如何对敌？

ATK無限大

625

发布于
2022-07-20

更新于
2022-07-22

题目描述

js利用网页失焦事件防切屏，但是ckeditor插件会触发失焦事件

题目来源及自己的思路

如题，需求是在一个老项目中的考试页面添加一个防切屏功能（吐）
结果那个网站还是能左右屏作弊，全屏了我退出，其他界面鼠标滚动又不触发失焦。。。
于是百度寻找思路，主流的就是失焦事件，但是这个系统用了ckeditor插件作为大题的输入框
结果就是，点进去会触发网页的失焦事件！看了结构是内嵌了个iframe
我之前用activeElement获取当前焦点所在的元素，可以判断如果是这个iframe不触发失焦事件，但是从那个iframe出来该怎么处理又是个问题。iframe失焦如何判断是点到外面了还是在当前网页内呢，或者说，为什么点进这个iframe会触发网页失焦呢？我在本地写的案例，直接加一个iframe是没有这个问题的

当然想过其他思路：
1、改用鼠标移出网页事件（这个是我一开始的想法），但是全屏时，那个退出全屏的提示和叉号居然触发了事件。。。暂时没找到办法解决这个

2、visibilitychange事件，额，这个感觉没什么用（比失焦还没用，只有网页全部隐藏到后面了才行）
3、不使用此插件，这个也不太好弄，直接通过js生成的，代码一点注释都没有，而且架构很乱（一言难尽，槽点太多）

主要代码

老项目php+twig框架，没找到直接提交的路由或者其他方法，暂时先用触发按钮点击效果替代了

        // 事件回调
        function listenerFn(e) {
          curNum++
          let warningText = `检测到您已切屏${curNum}次，`
          if (allowNum > 1) warningText += `一共可切屏${allowNum}次，`
          $('#warning').show()
          $('.wrapper').show()
          offListener()
          document.documentElement.style.overflow = 'hidden'
          if (curNum >= allowNum) {
            offListener()
            $('.warning-text').html(warningText + `试卷已经<span style='color:blue'>自动提交</span>！`)
            // 触发提交按钮
            // $('#finishPaper').click()
            // $(window).off('beforeunload', beforeunloadCallback);
            // setTimeout(() => {
            //   // 触发提交的确定按钮
            //   $('.submit-btn').click()
            // }, 200)
          } else {
            $('.warning-text').text(warningText + `超过${allowNum}次试卷将自动提交！`)
          }
        }
        // 绑定监控事件
        function bindListener() {
          isListening = true
          setTimeout(()=>{
            $(window).on('blur', listenerFn)
          },200)
        }
        // 解除监控事件
        function offListener() {
          isListening = false
          $(window).off('blur', listenerFn)
        }