如何阻止Bootstrap模态框打开时触发全局keypress事件监听器

解决方案 #

方案1：利用Bootstrap模态框自带状态判断 #

Bootstrap模态框显示时会自动给body元素添加modal-open类，隐藏时自动移除，直接在原有全局按键监听逻辑中加一层拦截判断即可，无需修改其他业务代码：

document.addEventListener("keypress", function onPress(event) {
  // 模态框打开状态下直接跳过跳转逻辑
  if (document.body.classList.contains('modal-open')) return
  window.location = '/home';
});

方案2：增加通用输入场景拦截 #

如果页面除了模态框输入外，还有其他普通输入框需要避免触发跳转，可以扩展判断条件，排除所有输入场景：

document.addEventListener("keypress", function onPress(event) {
  const targetEl = event.target
  if (
    // 拦截模态框打开场景
    document.body.classList.contains('modal-open') ||
    // 拦截普通输入框、文本域输入场景
    ['INPUT', 'TEXTAREA'].includes(targetEl.tagName) ||
    // 拦截富文本等可编辑元素输入场景
    targetEl.isContentEditable
  ) return
  window.location = '/home';
});

方案3：动态绑定/解绑监听器 #

也可以通过监听Bootstrap模态框的生命周期事件，在模态框打开时移除全局监听，关闭时重新绑定：

// 先把监听回调提取为可复用变量
function goHomeOnKeypress(event) {
  window.location = '/home';
}
// 初始化绑定监听
document.addEventListener("keypress", goHomeOnKeypress);

// 绑定模态框生命周期事件，替换为你实际的模态框DOM元素
const targetModal = document.getElementById('你的模态框ID')
// 模态框打开时移除监听
targetModal.addEventListener('show.bs.modal', () => {
  document.removeEventListener('keypress', goHomeOnKeypress)
})
// 模态框完全关闭后重新绑定监听
targetModal.addEventListener('hidden.bs.modal', () => {
  document.addEventListener('keypress', goHomeOnKeypress)
})

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