如何设置click事件优先级高于blur事件以实现点击链接正常跳转

问题原因 #

blur 事件的触发优先级远高于链接的 click 事件，当你在输入框聚焦状态点击链接时，输入框会先触发 blur 逻辑把链接隐藏，此时浏览器已经无法捕获到已隐藏元素的点击事件，因此不会触发跳转。

解决方案 #

方案1：延时执行隐藏逻辑（兼容性最优）

给隐藏逻辑加100ms以内的延时，足够等待链接点击事件执行完成再隐藏链接，用户几乎感知不到延迟：

const input = document.querySelector('input')
let hideTimer = null

// 输入框失焦时延时隐藏
input.addEventListener('blur', () => {
  hideTimer = setTimeout(() => {
    document.querySelector('a').style.display = 'none'
  }, 80)
})

// 输入框重新聚焦时清除定时器，避免重复执行
input.addEventListener('focus', () => {
  clearTimeout(hideTimer)
})

原有HTML代码无需改动。

方案2：通过失焦目标判断（无延迟更优雅）

利用blur事件的relatedTarget属性，判断失焦后即将获得焦点的元素是否为目标链接，如果是则不执行隐藏逻辑：

document.querySelector('input').addEventListener('blur', (e) => {
  // 仅当失焦后聚焦的不是链接时，才隐藏链接
  if (e.relatedTarget?.tagName !== 'A') {
    document.querySelector('a').style.display = 'none'
  }
})

该方案无需额外定时器，没有视觉延迟，适配大多数业务场景。

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