Question

是否可以告诉如何选择单选按钮，即用户是否使用键盘或鼠标单击单选按钮？

Answer 1

没有跨浏览器解决方案来检测“真正的鼠标点击”与“键盘触发的点击事件”。

理想情况下，我们会检查MouseEvent.button值。不幸的是只有IE11＆amp; Edge将为键盘单击正确记录值“-1”。此时，所有其他浏览器都会为任何类型的点击记录值“0”。

另一种选择是检查MouseEvent.pageX＆amp; MouseEvent.pageY值。在Chrome中，键盘点击次数的值均为0。 Firefox的值也会为0，但它也会考虑$(window).scrollLeft()＆amp; $(window).scrollTop()值。不幸的是，Safari不会记录键盘事件的一致pageX / pageY值，IE会在键盘点击事件被触发时记录鼠标的确切位置。

最佳的跨浏览器解决方案是向您的无线电输入及其相关标签添加mouseup事件监听器，并在触发时设置标志。当键盘切换单选按钮时，会触发click事件，但mouseup事件不会被触发。因此，如果您在mouseup上设置标记并在click上检查此标记，则应该能够检测到鼠标是否单击了单选按钮。

var clickedByMouse = false;
$('label, input[type="radio"]').mouseup(function(e) {
    clickedByMouse = true;
});
$('input[type="radio"]').click(function() {
    if(clickedByMouse){
        console.log("mouse");
        //Reset flag
        clickedByMouse = false;
    }else{
        console.log("keyboard");
    }
});

此解决方案适用于跨浏览器，包括Safari和旧版IE。您可能会注意到我将label标记包含在mouseup事件中，这是因为label标记可以切换无线电输入。它们可以包裹在无线电输入中，也可以使用for属性链接到无线电输入。

上面我提到没有跨浏览器的解决方案。这是因为我开始使用屏幕阅读器测试此解决方案，特别是JAWS，并发现了另一个问题。

默认情况下，

JAWS不允许您使用箭头键在同一组的单选按钮之间切换。您必须按回车键才能进入特殊的“表格模式”，然后您可以按预期使用箭头键。然而，按回车键将切换单选按钮，JAWS将触发mouseup＆amp;单选按钮上的click事件。所以上面的代码不会有效。

var clickedByMouse = false;
$('label, input[type="radio"]').mouseup(function(e) {
    var keyboardPageX = (e.pageX === 0 || e.pageX === $(window).scrollLeft()) ? true : false,
        keyboardPageY = (e.pageY === 0 || e.pageY === $(window).scrollTop()) ? true : false;

    if((keyboardPageX && keyboardPageY) || (e.button === -1)){
       console.log("keyboard mouseup");
    }else{
       clickedByMouse = true;
    }
});
$('input[type="radio"]').click(function() {
    if(clickedByMouse){
        console.log("mouse");
        //Reset flag
        clickedByMouse = false;
    }else{
        console.log("keyboard");
    }
});

上述解决方案还使用MouseEvent的pageX，pageY和button值来仔细检查键盘点击事件。根据所使用的浏览器，它将与JAWS一起使用。

Answer 2

你可以在用户按空格键时做一个监听器（我假设你正在听的键盘命令）

$(document).keypress(function(e){
    if(e.which == 32){
        $("input[name=someRadioGroup]:radio").change(function () {
            console.log("Space bar was pressed to change the radio button"); 
        });
    }
});

http://jsfiddle.net/4pjnrcoz/1/

感谢@Mysteryos，他将HTML添加到这个小提琴中： http://jsfiddle.net/4pjnrcoz/3

Answer 3

似乎对更改事件不可行。我以这种方式解决了，如果有人知道更优雅的方式让我知道：

<input name="text" type="input">
<input name="radioButton" type="radio" value="1"> 1
<input name="radioButton" type="radio" value="2"> 2
<input name="radioButton" type="radio" value="3"> 3

var radioButtonValue;
$('input[name="radioButton"]').on("click", function(e) {
    var value = $(this).val();
    if (value !== radioButtonValue) {
        if (e.clientX === 0 && e.clientY === 0) {
            console.log("keyboard");
        } else {
            console.log("mouse");
        };
        radioButtonValue = value;        
    }    
});

http://jsfiddle.net/gy59n3u6/1/

Answer 4

 <input type="radio" id="radiobtn">

 $("#radiobtn").keyup(function(e) {
    var code = e.keyCode || e.which;
    if (code == 32) { 
       alert("Space bar was pressed");
    }
    else {
       alert("mouse click");
    }
 });

Answer 5

Here是关于单选按钮单击和更改事件的非常好的讨论。

您可以做的一件事是，创建一个单击事件处理程序并设置一个标志，稍后在另一个（回调可能！）函数上使用它来识别键盘或鼠标单击是否触发了更改！

Answer 6

如果click是由键盘引起的，则

event.detail是另一个可能的指示符，指示点击数。与event.x/y相比，这提供了更好的跨浏览器解决方案。

<input name="letter" type="radio" value="a"> a
<input name="letter" type="radio" value="b"> b
<input name="letter" type="radio" value="c"> c

<script>
document.addEventListener('click', e => {
  if (!e.detail) console.log('Keyboard click')
  else console.log('Mouseclick')
})
</script>

检查键盘或鼠标是否更改了单选按钮

6 个答案: