关于onchange事件在IE和FF下的表现及解决方法

在最近做的一个项目中，有这么一个功能点：页面上有一个checkbox，当用户选择或者取消选择该checkbox时会向后台发一个jsonp请求。当时的实现是为这个checkbox添加一个onchange事件，但结果却出人意料，为此，我深入的研究了一下，发现了onchange事件在IE和FF下的表现存在着以下问题。

问题①：在FF下，当改变checkbox的选中状态时，会马上触发onchange事件。但在IE下改变checkbox的选中状态时，并不会马上出发onchange事件，而是需要等待checbox失去焦点时该事件才会出发。

为了解决这个问题，我在checkbox的onclick事件里添加了this.blur()这条语句，这是由于onclick事件是在onchange事件之前执行的，因而在Onclick事件中添加this.blur()使checkbox失去焦点便马上会出发onchange事件。可如此一来，又遇到了第二个问题。

问题②：当onclick事件和this.blur同时使用时，在IE下会报错。

在网上查找了一些资料，终于发现了onpropertychange这个事件。该事件在FF下是不会触发的。而在IE下，当checkbox的选择状态改变时马上会出发。于是，得出了最终的解决方案：在IE下，为checkbox绑定onpropertychange事件，而在FF下，为其绑定onchange事件。

具体代码实现如下：


代码如下:

var ua=navigator.userAgent.toLowerCase();
var s=null;
var browser={ 
  msie:(s=ua.match(/msie\s*([\d\.]+)/))?s[1]:false, 
  firefox:(s=ua.match(/firefox\/([\d\.]+)/))?s[1]:false, 
  chrome:(s=ua.match(/chrome\/([\d\.]+)/))?s[1]:false, 
  opera:(s=ua.match(/opera.([\d\.]+)/))?s[1]:false, 
  safari:(s=ua.match(/varsion\/([\d\.]+).*safari/))?s[1]:false 
};
if(browser.msie){//若为IE浏览器
    checkbox.onpropertychange=function(){
         //do someting
    }
}
else{
    checkbox.onchange=function(){
        //do something
    }
}

赞 (0)

相关推荐

  • javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

    onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性! 在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件. 这样一来问题就解决了. 那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了. 但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效. 好

  • jquery下onpropertychange事件的绑定方法

    今天做一张表单,要求行输入的时候,自动计算值,并且计算值的这一列,要自动合计. 开始用了onchange事件,但是在输入的时候,用Javascript计算出并填值的那一列并不会响应onchange 事件. Google了一下,找到 onpropertychange这个事件,用JS设置值也可以响应. 在Jquery里用的时候,必须要用bind. 复制代码 代码如下: $("#textboxID").bind("propertychange", function() {

  • js中的onchange和onpropertychange (onchange无效的解决方法)

    笔者注:今天我在用到onchange事件时没有任何反应,最后翻查资料才知道Onchange的局限性和不稳定性.而onpropertychange却能很好的实现尤其是它的实时捕捉性能更是很值得用一下(幸亏有这个性能,做出的东西老板娘很满意 o(∩_∩)o...). 本人也比较懒,自己做的东西也懒的整理下来只能把搜索到的资料原版拿来个大家分享一下: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来捕获.例如一个 <input name="text1&qu

  • 关于onchange事件在IE和FF下的表现及解决方法

    在最近做的一个项目中,有这么一个功能点:页面上有一个checkbox,当用户选择或者取消选择该checkbox时会向后台发一个jsonp请求.当时的实现是为这个checkbox添加一个onchange事件,但结果却出人意料,为此,我深入的研究了一下,发现了onchange事件在IE和FF下的表现存在着以下问题. 问题①:在FF下,当改变checkbox的选中状态时,会马上触发onchange事件.但在IE下改变checkbox的选中状态时,并不会马上出发onchange事件,而是需要等待chec

  • js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法

    本文实例讲述了js插件设置innerHTML时在IE8下提示"未知运行时错误"解决方法.分享给大家供大家参考.具体分析如下: 问题描述: 网站中使用了一个js插件,设置innerHTML时,在IE8下报错"未知运行时错误": <div id="divContainer"> <a name="link"> -->报错处 第三方插件内容- </a> </div> 原因: 所设置

  • ajax在兼容模式下失效的快速解决方法

    使用jQuery,用ajax实现局部刷新功能,在火狐,360急速浏览器高速模式下,ie8,9都能正常运行,但切换到兼容模式下无效,解决办法有两种关闭浏览器兼容性视图,二是引入json2.js文件 这里采用第一种,并且使用一种完美兼容性解决办法,在head头部加入 <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;IE=EDGE"> 即可! 以上这篇ajax在兼容模式下失效的快速解决方法就

  • javascript trim函数在IE下不能用的解决方法

    javascript 的trim 函数在firefox 下面使用没有问题 <script language="javascript"> var test1 = " aa "; test1 = test1.toString(); test1 = test1.trim(); </script> 在火狐下这样用没有问题, 但是在IE下就报错 那么我们可以修改一下 String.prototype.trim=function(){return thi

  • LBS BLOG在IE7下图片出现滚动条的解决方法

    今天看我自己的BLOG才发现这个问题, 怎么图片四周全是滚动条,就算是很小的一张图片, 换了FF看却很正常,就怀疑是IE7搞的鬼, 在网上搜了一搜, 还真有解决方法, 跟我一样用LBS的兄弟姐妹快更新一下自己的BLOG吧, 在IE7下真的是惨不忍睹啊. 找到class目录下的ubbcode.asp文件,修改132行, 复制代码 代码如下: var newStr='<div style="width: 100%;"><a href="'+strURL+'&qu

  • 远程linux xshell下输出中文乱码解决方法

    使用xshell登录中文版CentOS或者redhat时,在xshell下如果输出的是中文的话可能会显示乱码,通过如下办法可以有效的解决乱码问题 linux中文乱码解决方法如下: 复制代码 代码如下: [root@localhost ~]# cd /etc/sysconfig/ [root@localhost sysconfig]# cp i18n i18n.bak #备份i18n文件 [root@localhost sysconfig]# echo "" >i18n [root

  • Linux系统下常见基本问题的解决方法

    一．系统问题  1.系统无法启动 可能问题是MBR受损或GRUB错误.可考虑两种方案:1 进入救援模式rescue mode,编辑/boot/grub/下的menu.lst .2 修复MBR,备份MBR:dd if=/dev/had of=MBR-backup bs=512 count=1 ,恢复MBR:dd if=MBR-backup of=/dev/had bs=512 count=1 . 2.启动到ubuntu logo时,卡机 解决方案是编辑/boot/grub/menu.lst,找到此

  • js改变img标签的src属性在IE下没反应的解决方法

    今天写项目时遇到个图片需要动态改变,例: <img src="images/image01.jpg" id="myImage" /> 然后改变时,使用js脚本: document.getElementById('checkCodeImage').src='images/image02.jpg'; 然后在Chrome FF里都能改变成功,但在IE下却不行,网上搜了半天,大概了解了,这个是IE的一个bug,要想改变src属性成功,可以这么写: documen

  • JQuery中Ajax的Post提交在IE下中文乱码的解决方法

    引言: 在JQuery的Ajax POST请求中,进行请求,其中的中文在后台,显示为乱码,该如何解决呢? 问题的引入: 复制代码 代码如下: var regid = $('#oregion').combobox('getValue'); //var sname = $('#sname').val(); var sname = encodeURI($('#sname').val(),"UTF-8"); if(regid!=""&&regid!='und

  • png在IE6 下无法透明的解决方法汇总

    FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的 复制代码 代码如下: style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png')" 语法: filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSi

随机推荐