如何在鼠标移开或关闭dropdown button后移除其焦点状态

原生JavaScript处理方案 #

• 监听下拉菜单的关闭事件，在关闭逻辑执行完成后，主动调用按钮元素的blur()方法移除焦点，示例代码如下：

// 先获取下拉按钮的DOM元素
const dropdownBtn = document.querySelector('.dropdown-toggle-btn')
// 原有下拉关闭逻辑执行后新增以下代码
dropdownBtn.blur()

• 如果是点击页面空白区域触发下拉关闭的场景，直接把上述blur()调用加在空白点击的关闭回调中即可生效。

前端框架处理方案 #

Vue 2/3 #

• 给下拉按钮绑定ref引用，下拉关闭逻辑执行后调用对应方法即可：
  • Vue2：this.$refs.dropdownBtn.blur()
  • Vue3：dropdownBtn.value.blur()
• 如果使用Element UI、Ant Design Vue等组件库的下拉组件，可监听组件的visible-change等关闭回调，拿到组件实例或者直接选中按钮DOM后调用blur()。

React #

• 给下拉按钮绑定useRef引用，下拉关闭逻辑执行后调用dropdownBtnRef.current.blur()即可。
• 如果使用Ant Design、MUI等组件库的下拉组件，在下拉隐藏的回调函数中执行上述blur()逻辑即可。

样式规避方案（非特殊场景不推荐） #

如果不需要适配键盘操作的无障碍访问要求，可以直接通过CSS移除按钮的焦点样式，无需修改JS逻辑：

.dropdown-toggle-btn:focus {
  outline: none;
  box-shadow: none;
}

注意：该方案会移除按钮的键盘聚焦提示，会影响依赖键盘操作的用户的使用体验，仅建议无需做无障碍适配的内部系统优先使用。

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