如何将Onkeydown与OnClick事件区分开(输入=“无线电”)

Question

在" onclick"函数中如何检查单击事件是否是由鼠标触发的 - 由鼠标或键盘触发的事件？

const onClick = () => {
 console.log("onClick");
}
const onKeyDown = (e) => {
 console.log("onKeyDown");
}
const Root = () => (
 <div>
  <input type="radio" id="Name" name="contact" onClick={onClick} 
   onKeyDown={onKeyDown}/>
  <label for="Name">Name</label>
  <input type="radio" id="Email" name="contact" onClick={onClick} 
   onKeyDown={onKeyDown}/>
  <label for="Email">Email</label>
 </div>
)

当我单击向下或向上箭头(我使用键盘更改无线电选项(时，onkeydown和onclick事件会被调用。

Answer 1

您可以检查事件是否具有e.pageX和e.pageY坐标：

if (e.type === 'click' && e.pageX !== 0 && e.pageY !== 0)

document.querySelectorAll('[type="radio"]').forEach(elem => {
  elem.addEventListener('click', (e) => {
    if (e.type === 'click' && e.pageX !== 0 && e.pageY !== 0) {
      console.log(e.type);
    }
  });
  elem.addEventListener('keydown', (e) => {
    console.log(e.type);
  });
});

<div>
  <input type="radio" id="Name" name="contact" />
  <label for="Name">Name</label>
  <input type="radio" id="Email" name="contact" />
  <label for="Email">Email</label>
</div>

Answer 2

作为名称所指定的这些功能。当用户按键盘键时触发OnKeyDown。和当用户按鼠标或任何其他设备的平均值单击字段时，onclick触发。

Answer 3

event.type将给出事件的名称

document.getElementById('dempRadio').addEventListener('click', function(e) {
  console.log(e.type)
})
document.getElementById('dempRadio').addEventListener('keydown', function(e) {
  console.log(e.type)
})

<input type="radio" id="dempRadio"> Test