HTML Object标签内Keypress事件失效问题及JavaScript方案咨询

浏览器内置的PDF查看器会捕获<object>或<iframe>内部的键盘事件，导致绑定在document上的冒泡阶段事件监听器无法触发。以下是几种可靠的JavaScript解决方案：

方案一：使用捕获阶段监听ESC事件 #

通过开启事件捕获模式，让document在事件到达PDF控件前先捕获到键盘事件，确保ESC键逻辑能触发。

<div id="pdfModal">
  <object data="https://www.africau.edu/images/default/sample.pdf"></object>
  <button id="closeBtn">关闭</button>
</div>

const modal = document.getElementById('pdfModal');
const closeBtn = document.getElementById('closeBtn');

function openModal() {
  modal.style.display = 'block';
  // 绑定捕获阶段的keydown事件
  document.addEventListener('keydown', handleEscPress, true);
}

function closeModal() {
  modal.style.display = 'none';
  // 移除事件监听，避免内存泄漏
  document.removeEventListener('keydown', handleEscPress, true);
}

function handleEscPress(e) {
  if (e.key === 'Escape') {
    closeModal();
  }
}

// 绑定关闭按钮事件
closeBtn.addEventListener('click', closeModal);

// 示例：点击链接打开弹窗
document.querySelector('a.pdf-link').addEventListener('click', (e) => {
  e.preventDefault();
  openModal();
});

方案二：添加焦点占位元素（辅助兼容） #

在弹窗内添加一个不可见的可聚焦元素，弹窗打开时自动聚焦到该元素，确保键盘事件优先被页面捕获。此方案可与方案一结合，提升兼容性：

<div id="pdfModal">
  <!-- 不可见的焦点占位元素 -->
  <div id="focusTrap" tabindex="0" style="position:absolute; width:0; height:0; overflow:hidden;"></div>
  <object data="https://www.africau.edu/images/default/sample.pdf"></object>
  <button id="closeBtn">关闭</button>
</div>

const focusTrap = document.getElementById('focusTrap');

function openModal() {
  modal.style.display = 'block';
  focusTrap.focus(); // 自动聚焦到占位元素
  document.addEventListener('keydown', handleEscPress, true);
}

关键说明 #

• 必须在弹窗关闭时移除事件监听器，避免多个弹窗实例或重复绑定导致的逻辑冲突。
• 捕获阶段监听（addEventListener第三个参数设为true）是解决PDF控件拦截事件的核心，它能绕过PDF内部的事件捕获逻辑。

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