Skip to content
← Back to rules

jsx-a11y/mouse-events-have-key-events 正确性

作用

强制要求 onMouseOver / onMouseOut 事件必须搭配 onFocus / onBlur 事件使用。

为什么这是问题?

为键盘操作进行编码对于无法使用鼠标、需要辅助技术(AT)兼容性以及使用屏幕阅读器的用户来说非常重要。

示例

此规则的错误代码示例:

jsx
<div onMouseOver={() => void 0} />

此规则的正确代码示例:

jsx
<div onMouseOver={() => void 0} onFocus={() => void 0} />

配置

该规则接受一个配置对象,包含以下属性:

hoverInHandlers

type: string[]

default: ["onMouseOver"]

需要对应键盘事件处理器的悬停进入鼠标事件处理器列表。

hoverOutHandlers

type: string[]

default: ["onMouseOut"]

需要对应键盘事件处理器的悬停退出鼠标事件处理器列表。

使用方法

要通过配置文件或 CLI 启用此规则,可以使用:

json
{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/mouse-events-have-key-events": "error"
  }
}
bash
oxlint --deny jsx-a11y/mouse-events-have-key-events --jsx-a11y-plugin

参考资料