关于radio的onchange事件在IE、FF中行为不同的问题

最新推荐文章于 2024-05-15 19:49:23 发布

吉他猪

最新推荐文章于 2024-05-15 19:49:23 发布

阅读量1w

点赞数 2

分类专栏： javaScript 文章标签： ie jquery input firefox html

javaScript 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了IE浏览器中onchange事件的一个已知问题，即在选择复选框或单选按钮时不会立即触发该事件，而是需要额外的操作如失去焦点才能触发。通过提供示例代码和解决方法，包括使用jQuery或直接在onclick事件中调用blur()方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此bug存在于IE所有的版本（6,7,8）不知道是不是bug，还是IE故意这样设计的？姑且不做评价，我们来看看IE onchange事件的重现过程：

给input等控件添加onchange事件，例如input的checkbox（或radio），在IE下点击选中，并没有触发onchange事件，而需要再次失去焦点（点击页面的任何地方）的时候才可以触发onchange事件，而在Firefox下是点击选中checkbox（radio等）既可以触发onchange事件的。

bug重现代码：

<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>IE onchange event bug</title>
</head>
<body>
<input type="radio" value="1" onchange="alert(this.value);" id="demo1"/>
<label for="demo1">demo1</label>
<input type="radio" value="2" onchange="alert(this.value);" id="demo2"/>
<label for="demo2">demo2</label>
</body>
</html>

解决方法：

在保留onchange的前提下，在onclick里面调用checkbox（或radio）的blur()方法。例如：

<input type="checkbox" value="1" onchange="alert(this.value);" onClick="this.blur();" id="demo1"/>

在jQuery1.4.2中绑定change事件是完全可以解决的，而在jQuery1.3.2中绑定change事件是不行的，我们可以通过click事件来绑定
如果不怕麻烦也不介意绑定两次事件，可以使用IE自带的onpropertychange事件绑定change事件，不过这样子在IE下就绑定了两次change事件，不推荐这个方法，如果是checkbox，radio等还是使用click事件来处理吧。