检查键盘或鼠标是否更改了单选按钮
是否可以告诉我们如何选择单选按钮，即用户是否使用键盘或鼠标单击单选按钮？
没有跨浏览器解决方案来检测“真正的鼠标点击”与“键盘触发的点击事件”。
理想情况下，我们可以检查MouseEvent.button值。 不幸的是，只有IE11和Edge才能正确记录键盘点击的值“-1”。 此时，所有其他浏览器将为任何类型的点击记录值“0”。
另一个选项是检查MouseEvent.pageX和MouseEvent.pageY值。 在Chrome中，键盘点击次数的值均为0。 Firefox的值也为0，但它也会考虑$(window).scrollLeft()和$(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将在单选按钮上触发click按钮和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一起使用 。
当用户按下空格键时你可以做一个监听器（我假设你正在听的是键盘命令）
$(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
似乎对变更事件不可行。 我以这种方式解决了，如果有人知道更优雅的方式让我知道：
1 2 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; } });
以下是单选按钮单击和更改事件的相当不错的讨论。
你可以做的一件事是，创建一个click事件处理程序并设置一个标志，稍后在另一个（回调可能！）函数上使用它来识别键盘或鼠标单击是否触发了更改！
$("#radiobtn").keyup(function(e) { var code = e.keyCode || e.which; if (code == 32) { alert("Space bar was pressed"); } else { alert("mouse click"); } });