仅click事件触发focus时移除HTML标签outline，保留tab触发的outline，React中如何实现？

成熟工具方案 #

这个需求属于非常通用的可访问性优化场景，有现成的开箱即用方案：

• 可以直接使用what-input工具库，它的核心能力就是自动识别用户当前是用鼠标/触摸/键盘哪种方式操作，完全匹配你的需求，React生态下也有封装好的react-what-input可以直接集成。
  引入后只需要加少量全局CSS即可生效：

/* 鼠标/触摸触发focus时隐藏outline */
[data-whatintent="mouse"] *:focus,
[data-whatintent="touch"] *:focus {
  outline: none;
}
/* 键盘触发focus时保留outline，也可以自定义样式 */
[data-whatintent="keyboard"] *:focus {
  outline: 2px solid #1677ff; /* 可根据设计调整 */
}

自研方案可行性 #

你提到的思路完全可行，本质上和上述工具库的核心逻辑一致，只需要补充两个细节就能避免问题：

1. 不要只监听click事件，要同时监听mousedown和keydown事件，用全局变量标记当前交互类型，判断键盘操作时仅识别tab/shift+tab触发的聚焦场景即可
2. 不要直接动态修改元素的outline样式，通过给body添加自定义属性标记交互类型，用CSS选择器控制outline的显示隐藏，性能更好也不会和组件内样式冲突

React 自研极简实现示例 #

不需要引入额外依赖，直接在根组件添加这段逻辑即可：

import { useEffect } from 'react'
import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body[data-interaction="mouse"] *:focus {
    outline: none;
  }
`

function App() {
  useEffect(() => {
    const setInteractionType = (type) => {
      document.body.dataset.interaction = type
    }

    // 鼠标按下时标记为鼠标交互
    const handleMouseDown = () => setInteractionType('mouse')
    // 按下tab键时标记为键盘交互
    const handleKeyDown = (e) => {
      if (e.key === 'Tab') setInteractionType('keyboard')
    }

    window.addEventListener('mousedown', handleMouseDown)
    window.addEventListener('keydown', handleKeyDown)

    return () => {
      window.removeEventListener('mousedown', handleMouseDown)
      window.removeEventListener('keydown', handleKeyDown)
    }
  }, [])

  return (
    <>
      <GlobalStyle />
      {/* 你的其他业务组件 */}
    </>
  )
}

这个实现已经可以覆盖绝大多数常用场景，不需要额外复杂处理。

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