如何区分单选框（input="radio"）的onKeyDown与onClick事件及判断触发方式

嘿，这两个问题在处理表单可访问性优化的时候经常碰到，我来给你详细拆解清楚：

首先得明确两者的触发逻辑和核心差异：

• onKeyDown 是键盘按键按下瞬间触发的，只要单选框处于焦点状态，你按下任何键盘按键（比如上下箭头切换选项、回车/空格选中），它都会被触发。它只响应纯键盘交互，和单选框最终是否改变状态无关。
• onClick 是单选框选中状态被改变时触发的——注意这个触发源不一定是鼠标！当你用键盘的回车/空格选中选项，甚至用上下箭头切换选项时（部分浏览器会触发），onClick 也会跟着触发。它响应的是「单选框被激活」这个动作，不管动作来自鼠标还是键盘。

举个实际场景：用上下箭头切换单选框选项时，会先触发onKeyDown（捕获到上下箭头按键），随后单选框状态改变，触发onClick；而直接用鼠标点击单选框，只会触发onClick，不会触发onKeyDown（除非点击时不小心按了键盘）。

想要区分触发源，我们可以利用事件对象（event）的几个属性，这里给你两个可靠的实现方法：

方法1：通过 event.button 判断 #

当事件由鼠标触发时，event.button 会返回对应按键的数值（左键是0，中键是1，右键是2）；如果是键盘触发的click事件，event.button 的值是 -1。

代码示例：

const handleRadioClick = (e) => {
  const isMouseTriggered = e.button !== -1;
  
  if (isMouseTriggered) {
    console.log("这个点击是鼠标触发的");
    // 执行鼠标专属逻辑
  } else {
    console.log("这个点击是键盘操作触发的");
    // 执行键盘专属逻辑，或者跳过某些不需要重复执行的代码
  }
};

方法2：通过 event.detail 判断 #

event.detail 记录了事件的触发次数，鼠标点击一次的话，detail 值是1；而键盘触发的click事件，detail 值是0。

代码示例：

const handleRadioClick = (e) => {
  const isMouseTriggered = e.detail > 0;
  
  if (isMouseTriggered) {
    // 鼠标触发逻辑
  } else {
    // 键盘触发逻辑
  }
};

小提示：不同浏览器可能有细微差异，比如部分浏览器在上下箭头切换单选框时不会触发click事件，但根据你的描述，当前场景下两者都会触发，用上面的方法就能准确区分啦。

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