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

Question

能否说出如何选择单选按钮，即用户是否使用键盘或鼠标单击单选按钮？

Answer 1

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

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

另一个选项是检查MouseEvent.pageX和MouseEvent.pageY的值。在Chrome中，这两个值的键盘点击值都将为0。Firefox的值也将为0，但也会将$(window).scrollLeft()＆$(window).scrollTop()值作为因素。不幸的是，Safari不会为键盘事件记录一致的pageX/ pageY值，并且在触发键盘点击事件时IE会记录鼠标的确切位置。

最好的跨浏览器解决方案是将mouseup事件侦听器添加到您的无线电输入及其相关标签，并在触发它时设置一个标志。当键盘切换单选按钮时，将触发单击事件，但mouseup不会触发该事件。因此，如果将标志设置为on mouseup并选中on 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不允许您使用箭头键在同一组的单选按钮之间切换。您必须按Enter键才能进入特殊的“表单模式”，然后可以按预期使用箭头键。但是，按Enter键将切换单选按钮，并且JAWS将触发单选按钮上的mouseup＆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一起使用。