如何区分 onKeyDown 和 onClick 事件（input=“radio”）

Question

如何在 "onClick" 函数中检查点击是由 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

正如这些函数的名称所指定的那样。 onKeyDown 当用户按下键盘键时触发。和 onClick 当用户通过鼠标或任何其他设备单击字段时触发。

Answer 2

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

Answer 3

您可以检查事件是否有 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>

如何区分 onKeyDown 和 onClick 事件（input=“radio”）

How to distinguish onKeyDown from the onClick event (input=“radio”)

javascript

events

onclick

keyboard-events

onkeydown