Question

您可以在此处查看：https://jsfiddle.net/vt0u2ddk/

var items = document.getElementsByTagName('input');
for (var i = 0; i < items.length; i++) {
  items[i].onclick = function(e) {
    alert('clicked');
    console.log('clicked', e.target.value);
  };
}

<div id="text">
  <input name="auto" value="foo" type="radio" checked>foo</label>
  <input name="auto" value="bar" type="radio">bar</label>
  <input name="auto" value="ming" type="radio">ming</label>
</div>

如果首先单击单选按钮（而不是标签），则会收到单击事件的警报。如果您随后使用箭头键切换单选按钮的选择，则每次触发单击事件时。为什么？我使用的是键盘而不是鼠标。是否有解释和/或解决方法？

Answer 1

我建议改为使用mouseup事件。 click事件认为切换单选按钮是左键单击（出于某种原因，通过选中e.button来验证这一点），但mouseup正确识别两者之间的差异，并且在使用键盘。我的测试似乎验证mouseup是否正确识别出触摸事件也引发了手指，但我不是100％就此而言。

＆＃13;

var items = document.getElementsByTagName('input');
for (var i = 0; i < items.length; i++) {
  items[i].onmouseup = function(e) {
    alert('clicked: ' + e.button);
    console.log('clicked', e.target.value);
  };
}

＆＃13;

<div id="text">
  <input name="auto" value="foo" type="radio" checked>foo</label>
  <input name="auto" value="bar" type="radio">bar</label>
  <input name="auto" value="ming" type="radio">ming</label>
</div>

＆＃13;

在javascript中使用键盘触发器点击事件在无线电输入之间切换

1 个答案: