如何在网页失去焦点时模糊整个body元素并添加提示文本？

直接用document.visibilitychange事件就能搞定，这是专门监听页面可见性变化的API，比blur/focus事件更精准，不会因为页面内元素焦点变化误触发。

实现步骤： #

1. HTML结构
   先加一个遮罩层用来显示提示文本，初始隐藏：

   <div class="focus-overlay">回来嘛 :(</div>
   

2. CSS样式
   给页面内容加模糊过渡，遮罩层做全屏覆盖和显示动画：

   /* 页面内容模糊效果 */
   body.blur {
     filter: blur(8px);
     transition: filter 0.3s ease;
   }
   
   /* 遮罩层样式 */
   .focus-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     color: white;
     font-size: 2rem;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
     z-index: 9999;
   }
   
   .focus-overlay.active {
     opacity: 1;
     visibility: visible;
   }
   

3. JavaScript逻辑
   监听页面可见性变化，切换对应类名：

   document.addEventListener('visibilitychange', function() {
     const body = document.body;
     const overlay = document.querySelector('.focus-overlay');
   
     if (document.hidden) {
       body.classList.add('blur');
       overlay.classList.add('active');
     } else {
       body.classList.remove('blur');
       overlay.classList.remove('active');
     }
   });
   

为什么之前的方法没生效？ #

• blur/focus事件绑定在body或html上时，只要页面内任意元素失去/获得焦点就会触发，不是针对整个页面的失焦（比如切换标签页、最小化浏览器）。
• visibilitychange事件是浏览器提供的标准API，专门检测文档是否可见，完全匹配你要的场景。

内容的提问来源于stack exchange，提问作者vys