Javascript 如何防止在IE11中页面冻结时触发OnBlur事件

我有一份使用React的考试申请。我需要在IE11中运行这个应用程序。在这个考试应用程序中，我添加了onblur事件，当用户从选项卡切换时将运行该事件，当触发该事件时，用户将收到弹出窗口的警报，并且用户的锁计数（以DB为单位）将增加。如果锁计数超过为检查定义的限制，则用户的检查将被阻止

问题是当页面暂时冻结时会触发onblur事件。通常，当重新提交页面或调用任何API服务需要很长时间时，就会出现这种冻结问题。它在Chrome中工作没有任何问题

我还尝试了onBlur事件和Mouseleave事件，但是当页面冻结时，Mouseleave事件也会触发

如何防止在IE11中页面冻结时触发onBlur事件

onBlur和onFocus事件的代码：

  const onFocus = () => {
    setIsOnblur(false);
  };

  const onBlur = () => {
    increaseCount();
    setIsOnblur(true);
  };

  useEffect(() => {
    if (props.location.pathname.includes("/Exam/")) {
      window.addEventListener("focus", onFocus);
      window.addEventListener("blur", onBlur);

      return () => {
        window.removeEventListener("focus", onFocus);
        window.removeEventListener("blur", onBlur);
      };
    }
  }, []);

---

问题似乎在于，

blur

侦听器有时会在页面完全加载之前启动。我们可以通过

load

事件确保页面已完全加载

发件人：

加载整个页面（包括所有页面）时，将触发

load

事件 依赖资源，如样式表和图像

因此，我将使

addEventListener

s依赖于已完全加载的窗口。像这样的方法应该会奏效：

useffect（（）=>{
window.addEventListener（“加载”，（）=>{
if（props.location.pathname.includes（“/Exam/”）{
window.addEventListener（“焦点”，onFocus）；
addEventListener（“模糊”，onBlur）；
}
return（）=>{
removeEventListener（“焦点”，onFocus）；
removeEventListener（“模糊”，onBlur）；
};
});
}, []);

响应页面的可见性事件是否有帮助？我认为安迪的回答有道理。它在呈现页面或调用API时冻结，以便您可以等待页面完全加载，然后触发模糊事件。您还可以使用F12开发工具性能选项卡来尝试查找它在IE 11中冻结的原因。