单选按钮上的 onchange 在 IE8 中无法正常工作

本文介绍了单选按钮上的 onchange 在 IE8 中无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

I'm forced to work with IE8 (8.0.7601.17514) and I have this simple page:

<!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 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

(thanks to @mu-is-too-short).

The workaround to this is to add a onclick blur+focus:

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


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

解决方案

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.

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 onchange event should be triggered but as you can see it is redundant code thus you are better off just using the onclick event handler.

The better solution is to use a modern javascript library like jquery which handles all these quirks for you..

这篇关于单选按钮上的 onchange 在 IE8 中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！