键盘触发click事件时调用focus()触发keyup事件原因咨询

这是浏览器的标准事件调度逻辑，属于预期设计行为，并非代码逻辑遗漏。
键盘操作触发按钮点击的完整事件时序如下：

• 按钮获得焦点时，用户按下回车键，首先在按钮上触发keydown事件
• 浏览器检测到回车触发按钮激活的默认逻辑，同步执行按钮绑定的click事件处理函数
• 此时click回调内调用focus()将焦点立刻转移到modal元素
• 键盘事件序列继续推进，到keyup触发节点时，键盘事件的派发目标是触发瞬间持有焦点的元素，因此原本应该派发给按钮的keyup，直接被派发到了刚拿到焦点的modal元素上，触发了你绑定的keyup回调。

鼠标点击按钮时行为符合预期的原因很简单：鼠标触发click的事件流不涉及keydown/keyup的键盘事件序列，焦点转移发生在鼠标事件流程中，自然不会额外触发modal的keyup事件。

你在click事件处理函数中调用的stopPropagation()、preventDefault()、stopImmediatePropagation()，全部是作用于当前click事件对象的方法，只能拦截、修改click事件本身的传播逻辑和默认行为，根本影响不到还未进入触发流程的键盘keyup事件，因此完全无法解决问题。

• 方案1：推迟焦点操作执行时机，等当前完整的键盘事件序列执行完毕（keyup已经在原按钮元素上触发完成）后，再执行焦点转移，侵入性最低，是最常用的处理方式：

document.getElementById('testButton').addEventListener('click', e => {
  setTimeout(() => {
    document.getElementById('modal').focus();
  }, 0);
});

• 方案2：在modal的keyup回调中增加过滤逻辑，拦截焦点跳转带过来的无效keyup事件，适合不方便调整焦点触发时机的场景：

document.getElementById('modal').addEventListener('keyup', e => {
  // 拦截从按钮跳转焦点时携带的回车触发事件
  if (e.key === 'Enter' && performance.now() - e.target.dataset.focusTime < 20) return;
  alert('Modal element triggered!');
});

// 焦点转移时记录时间戳即可配合上面的判断
document.getElementById('testButton').addEventListener('click', e => {
  const modal = document.getElementById('modal');
  modal.dataset.focusTime = performance.now();
  modal.focus();
});

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