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

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

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

＆＃13;

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);
  });
});

＆＃13;

<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>

＆＃13;

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

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

3 个答案: