Javascript 单选按钮上的 onchange 在 IE8 中无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10579019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onchange on radiobutton not working correctly in IE8
提问by Ondrej Skalicka
I'm forced to work with IE8 (8.0.7601.17514) and I have this simple page:
我被迫使用 IE8 (8.0.7601.17514) 并且我有这个简单的页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form action=".">
<input type="radio" name="rad" value="1" onchange="alert(1);"/>
<input type="radio" name="rad" value="0" onchange="alert(0);" checked="checked"/>
</form>
<a href="http://google.com">some dummy link</a>
</body>
</html>
What I expect is that as the second radio button is selected, clicking on the first one will immediately raise an Alert. This works fine in FF.
What I expect is that as the second radio button is selected, clicking on the first one will immediately raise an Alert. 这在 FF 中工作正常。
What actually happens is that when I click the first radio, nothing happens. Then, when the element is blurred (eg. I click somewhere else, the other radio, some link in the page etc), THEN the alert is raised.
实际发生的是，当我单击第一个收音机时，什么也没有发生。然后，当元素模糊时（例如，我单击其他地方、另一个收音机、页面中的某个链接等），然后会引发警报。
Is there a workaround to this?
有解决方法吗？
EDIT:
编辑：
apparently this behavior is exactly according to W3C spec
显然这种行为完全符合W3C 规范
change
The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.
改变
当控件失去输入焦点并且其值在获得焦点后已被修改时，就会发生更改事件。此事件对 INPUT、SELECT 和 TEXTAREA 有效。元素。
(thanks to @mu-is-too-short).
（感谢@mu-is-too-short）。
The workaround to this is to add a onclick blur+focus:
解决方法是添加一个 onclick 模糊+焦点：
function radioClick()
{
this.blur();
this.focus();
}
<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>
回答by Baz1nga
In Internet Explorer (up to at least IE8) clicking a radio button or checkbox to change its value does not actually trigger the onChange event until the the input loses focus.
在 Internet Explorer（至少 IE8）中，单击单选按钮或复选框以更改其值实际上不会触发 onChange 事件，直到输入失去焦点。
Thus you need to somehow trigger the blur event yourself.. one suggestiong would be to have a function: as follows:
因此，您需要以某种方式自己触发模糊事件..一个建议是拥有一个功能：如下：
function radioClick()
{
this.blur();
this.focus();
}
<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>
Now your onchangeevent should be triggered but as you can see it is redundant code thus you are better off just using the onclickevent handler.
现在您的onchange事件应该被触发，但正如您所看到的，它是多余的代码，因此您最好只使用onclick事件处理程序。
The better solution is to use a modern javascript library like jquery which handles all these quirks for you..
更好的解决方案是使用像 jquery 这样的现代 javascript 库，它可以为您处理所有这些怪癖。
回答by mu is too short
Technically, IE actually got this right. From the fine specification:
从技术上讲，IE 实际上做到了这一点。从精细规格：
change
The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.
改变
当控件失去输入焦点并且其值在获得焦点后已被修改时，就会发生更改事件。此事件对 INPUT、SELECT 和 TEXTAREA 有效。元素。
So in order for a change event to be trigger, the specification says that the element must lose focus (i.e. a blur is required). The usual kludge is to use a click handler or force the blur as the others have suggested.
因此，为了触发更改事件，规范说元素必须失去焦点（即需要模糊）。通常的kludge是使用点击处理程序或像其他人建议的那样强制模糊。
