如何阻止focusout事件默认行为并跳转执行自定义方法

问题原因 #

• focusout 事件本身属于不可取消事件，其cancelable属性值为false，因此调用$event.preventDefault()不会生效，无法阻止焦点向外转移的默认行为。
• 你当前的setFocus是在focusout回调中同步执行的，此时浏览器的原生焦点切换逻辑还未执行完毕，你手动设置的焦点会被后续的默认行为覆盖，因此看起来不生效。

解决方案 #

方案1：拦截Tab按键事件（适配按Tab切出的场景）

如果你只有按Tab键会触发焦点切到浏览器地址栏的场景，直接监听最后一个元素的keydown事件拦截Tab按键即可，性能和准确性都更高：

// 给最后一个可聚焦元素绑定keydown.tab事件
@HostListener('keydown.tab', ['$event'], this.lastFocusElement)
public onLastElementTab($event: KeyboardEvent) {
  // 阻止默认Tab切换行为
  $event.preventDefault();
  // 直接切换到第一个元素
  this.firstFocusElement.focus();
}

如果需要支持Shift+Tab从第一个元素切回最后一个元素，同理给第一个元素绑定keydown.shift.tab事件做拦截处理即可。

方案2：异步执行聚焦逻辑（适配所有焦点切出场景）

如果需要处理除Tab之外的其他焦点切出场景（比如点击页面空白处、系统快捷键切走焦点等），可以把聚焦逻辑放到异步队列中，等浏览器原生焦点切换行为执行完成后再强制覆盖：

@HostListener('document:focusout', ['$event']) 
public DocFocus($event: FocusEvent) {
  if (this.lastFocusElement && this.lastFocusElement === $event.target) {
    // 延迟0ms执行即可，让逻辑进入下一轮事件循环，等待原生焦点逻辑执行完毕
    setTimeout(() => {
      this.firstFocusElement.focus();
    }, 0)
  }
}

不想用setTimeout的话，也可以替换为requestAnimationFrame或者Angular的NgZone.run()，效果一致。

注意事项 #

• 确保firstFocusElement是可聚焦元素，配置了合法的tabindex属性（>=0），且元素处于可见状态（非display: none、visibility: hidden），否则调用focus()方法不会生效。
• 如果不需要监听全局的focusout事件，建议只给最后一个元素绑定focusout事件，减少不必要的事件触发开销。

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