如何阻止PowerPoint演示模式下内容加载项获取焦点？

针对你遇到的演示模式下点击内容加载项区域无法翻页的问题，以下几种方案可以实现阻止加载项获取焦点、让点击操作穿透到幻灯片的需求：

1. CSS指针事件穿透（最简便） #

如果加载项完全不需要用户交互，直接给整个加载项页面设置pointer-events: none，让所有点击事件直接穿透到下层的幻灯片，不会被加载项捕获，自然不会抢占焦点。

/* 全局禁用加载项页面的指针事件 */
html, body, * {
  pointer-events: none;
}

/* 若有个别需要保留交互的元素，单独开启指针事件 */
.allow-interaction {
  pointer-events: auto;
}

2. JavaScript强制拦截焦点与事件冒泡 #

通过监听焦点事件强制失焦，同时阻止点击事件在加载项内冒泡，确保幻灯片能接收翻页触发信号：

// 定义拦截函数
const blurHandler = (e) => e.target.blur();
const stopPropHandler = (e) => e.stopPropagation();

// 绑定拦截事件
document.addEventListener('focus', blurHandler, true);
document.addEventListener('click', stopPropHandler);

// 可选：仅在演示模式下启用拦截，编辑模式恢复正常
Office.context.document.getActiveViewAsync((res) => {
  if (res.value !== Office.ViewType.SlideShow) {
    document.removeEventListener('focus', blurHandler);
    document.removeEventListener('click', stopPropHandler);
  }
});

3. Office.js动态控制可聚焦元素 #

利用Office.js判断当前是否处于演示模式，动态设置加载项内元素的可聚焦属性：

Office.context.document.getActiveViewAsync((result) => {
  if (result.value === Office.ViewType.SlideShow) {
    // 遍历所有可聚焦元素，设置为不可聚焦并禁用点击行为
    const focusableEls = document.querySelectorAll(
      'button, input, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
    );
    focusableEls.forEach(el => {
      el.setAttribute('tabindex', '-1');
      el.addEventListener('click', (e) => e.preventDefault());
    });
  }
});

关键注意点 #

• 务必在**演示模式（SlideShow）**下测试效果，编辑模式下无需启用这些拦截逻辑。
• 方案1是最适配你场景的（加载项无需焦点），实现成本最低且效果稳定。
• 使用Office.js的Office.ViewType.SlideShow可以准确判断当前模式，避免在编辑模式下误拦截交互。

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