23

我被迫使用 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>

我期望的是，当第二个单选按钮被选中时，单击第一个单选按钮将立即引发警报。这在 FF 中运行良好。

实际发生的是，当我单击第一个收音机时，什么也没有发生。然后，当元素模糊时（例如，我单击其他地方，另一个收音机，页面中的某些链接等），然后发出警报。

有解决方法吗？

编辑：

显然这种行为完全符合W3C 规范

改变

当控件失去输入焦点并且其值在获得焦点后已被修改时，会发生更改事件。此事件对 INPUT、SELECT 和 TEXTAREA 有效。元素。

（感谢@mu-is-too-short）。

解决方法是添加一个 onclick blur+focus：

function radioClick()
{
 this.blur();  
 this.focus();  
}


<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>
4

3 回答 3

29

在 Internet Explorer（至少 IE8）中，单击单选按钮或复选框以更改其值实际上不会触发 onChange 事件，直到输入失去焦点。

因此，您需要自己以某种方式触发模糊事件。一个建议是要有一个函数：如下：

function radioClick()
{
 this.blur();  
 this.focus();  
}


<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>

现在onchange应该触发您的事件，但正如您所见，它是冗余代码，因此您最好只使用onclick事件处理程序。

更好的解决方案是使用像 jquery 这样的现代 javascript 库，它可以为您处理所有这些怪癖。

于 2012-05-14T07:31:25.103 回答
8

从技术上讲，IE 实际上做到了这一点。从精细规范：

改变

当控件失去输入焦点并且其值在获得焦点后已被修改时，会发生更改事件。此事件对 INPUT、SELECT 和 TEXTAREA 有效。元素。

因此，为了触发更改事件，规范规定元素必须失去焦点（即需要模糊）。通常的 kludge 是使用单击处理程序或按照其他人的建议强制模糊。

于 2012-05-14T07:32:32.593 回答
2

使用onclick，但即在值（或检查的属性）更改之前调用事件处理程序 msdn

于 2012-05-14T07:24:04.057 回答