JavaScript实现点击键盘外指定按钮时保持键盘不收起

你遇到的问题核心原因是e.stopPropagation()只能阻止事件冒泡，而键盘收起是输入框失焦触发的系统默认行为，触发顺序早于按钮的click事件，所以冒泡拦截完全不生效。可以通过以下两种方案实现需求： #

方案1：拦截touchstart事件（移动端最优，无感知） #

移动端触摸事件的触发顺序为touchstart → touchend → click，在touchstart阶段阻止默认行为，就能避免当前聚焦的输入框触发失焦，自然不会唤起键盘收起逻辑。
示例代码：

const muteBtn = document.querySelector('#mute-button')
muteBtn.addEventListener('touchstart', e => {
  // 仅阻止默认行为，不要阻止冒泡，避免影响页面其他交互逻辑
  e.preventDefault()
  // 直接在touchstart中执行静音切换逻辑，加了preventDefault后按钮原有的click事件不会触发
  toggleMuteStatus()
})

方案2：手动恢复输入框聚焦（兼容PC/多端场景） #

如果你的应用需要同时兼容PC端，可以先记录当前处于聚焦状态的输入框，点击按钮后手动让输入框恢复聚焦。该方案可能会出现键盘短暂闪烁的情况，优先级低于方案1。
示例代码：

// 全局记录最后一个聚焦的输入框/文本框
let lastFocusedInput = null
document.addEventListener('focus', e => {
  const target = e.target
  if (['INPUT', 'TEXTAREA'].includes(target.tagName) && !target.readOnly) {
    lastFocusedInput = target
  }
}, true)

// 按钮点击逻辑
const muteBtn = document.querySelector('#mute-button')
muteBtn.addEventListener('click', () => {
  toggleMuteStatus()
  // 执行完业务逻辑后立刻恢复输入框聚焦
  lastFocusedInput?.focus()
})

注意事项 #

• 如果使用React、Vue等前端框架，需要给按钮绑定原生的touch事件，不要使用框架封装的合成click事件，否则无法按预期拦截默认行为。
• 不要给可输入类元素（输入框、文本框）加该拦截逻辑，会导致输入功能失效。

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