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

ATK無限大
  • 5
新手上路,请多包涵

题目描述

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

题目来源及自己的思路

如题,需求是在一个老项目中的考试页面添加一个防切屏功能(吐)
结果那个网站还是能左右屏作弊,全屏了我退出,其他界面鼠标滚动又不触发失焦。。。
于是百度寻找思路,主流的就是失焦事件,但是这个系统用了ckeditor插件作为大题的输入框
结果就是,点进去会触发网页的失焦事件!看了结构是内嵌了个iframe
我之前用activeElement获取当前焦点所在的元素,可以判断如果是这个iframe不触发失焦事件,但是从那个iframe出来该怎么处理又是个问题。iframe失焦如何判断是点到外面了还是在当前网页内呢,或者说,为什么点进这个iframe会触发网页失焦呢?我在本地写的案例,直接加一个iframe是没有这个问题的
image.png
当然想过其他思路:
1、改用鼠标移出网页事件(这个是我一开始的想法),但是全屏时,那个退出全屏的提示和叉号居然触发了事件。。。暂时没找到办法解决这个
image.png
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)
        }

你期待的结果是什么?

期望能解决ckeditor输入框触发网页失焦的问题,或者能解决鼠标移出事件那个问题也行,求有经验的大佬帮忙看看,谢谢!

问题最新补充:

目前用鼠标移出事件,通过判断鼠标移出的高度,如果在那个提示的范围内,给他忽略掉,不算切屏,反正不知道的人也不会想到这上面:D
火狐调用全屏api进行全屏或者退出全屏的时候,居然会触发鼠标移出网页的事件,它好像加了个遮罩层ಥ_ಥ
哪个大佬有更好的办法,也可以留言一下,谢谢!

回复
阅读 809
1 个回答
ATK無限大
  • 5
新手上路,请多包涵

目前用鼠标移出事件,通过判断鼠标移出的高度,如果在那个提示的范围内,给他忽略掉,不算切屏,反正不知道的人也不会想到这上面:D
火狐调用全屏api进行全屏或者退出全屏的时候,居然会触发鼠标移出网页的事件,它好像加了个遮罩层ಥ_ಥ
哪个大佬有更好的办法,也可以留言一下,谢谢!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏