点击子元素时如何取消父元素的:focus-within状态

要让点击<Increment>组件时不触发.parent:focus-within，核心是阻止<Increment>内部的元素获取焦点——毕竟:focus-within的触发逻辑就是父元素下任意子节点（含后代）处于聚焦状态时生效。

给你两个实用方案：

方案1：修改<Increment>组件内部元素 #

如果能改动<Increment>的代码，给组件里可点击的元素（比如按钮、图标）加上tabindex="-1"属性。这个属性会让元素无法通过点击或键盘操作获取焦点，自然就不会触发父元素的:focus-within：

// 示例：Increment组件内的按钮写法
<button tabindex="-1">+</button>

方案2：通过事件处理规避焦点（无法修改Increment时用） #

如果没法改<Increment>的代码，可以在包裹它的.foo容器上监听点击事件，手动清除焦点：

// 以React项目为例，给foo容器绑定点击事件
<div className='foo' onClick={(e) => {
  e.stopPropagation();
  // 让当前处于聚焦状态的元素失焦
  document.activeElement?.blur();
}}>
  <Increment />
</div>

注意：用这个方案时要测试下，确保不会影响<Increment>本身的功能（比如计数逻辑）。

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