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

 本篇文章主要是对关于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(/msies*([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
    }
}
 

时间: 2024-11-18 16:19:41

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

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

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

placeholder在不同浏览器下的表现及兼容方法

1.什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或输入内容)时,提示文字消失. 写法如下: 2.placeholder的浏览器兼容性和在不同浏览器下的表现 由于placeholder是html5的新属性,可想而知,仅支持html5的浏览器才支持placeholder,目前最新的firefox.chrome.safari以及ie10都支持,ie6到ie9都

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

  这篇文章主要介绍了js插件设置innerHTML时在IE8下提示"未知运行时错误"解决方法,较为详细的分析了错误的原因及对应的解决方法,需要的朋友可以参考下 本文实例讲述了js插件设置innerHTML时在IE8下提示"未知运行时错误"解决方法.分享给大家供大家参考.具体分析如下: 问题描述: 网站中使用了一个js插件,设置innerHTML时,在IE8下报错"未知运行时错误": ? 1 2 3 4 5 <div id="di

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

在Chrome FF里都能改变成功,但在IE下却不行,网上搜了半天,大概了解了,这个是IE的一个bug,具体的解决方法如下,有类似问题的朋友可以参考下哈,希望对大家有所帮助   今天写项目时遇到个图片需要动态改变,例: <img src="images/image01.jpg" id="myImage" /> 然后改变时,使用js脚本: document.getElementById('checkCodeImage').src='images/image

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

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

梅花雨的日历控件在ASP.NET2.0下不可用的解决方法

asp.net|解决|控件|日历 梅花雨的日历控件的确很好用,可是在asp.net 2.0下,会发现安以往的方式用不起了,js报错"缺少对象".解决方法如下 1.<%@ Page Language="C#" CodePage="936"..... 一定加入936 ,否则出错 2.去掉 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu

SharePoint 2013 InfoPath无法保存下列表单的解决方法

在使用InfoPath发布表单,发布到SharePoint服务器报错,如下介绍: 环境:Windows 2012 DateCenter + Sql 2012 + SharePoint 2013 + Office 2013 错误截图 列表单的解决方法-sharepoint infopath"> 错误描述 InfoPath无法保存下列表单:http://url/InfoPathLibary 此文档库已被重命名或删除,或者网络问题导致文件无法保存.如果此问题持续存在,请于网络管理员联系. 解决方

img标签下多余空白BUG解决方法

根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳,供大家参考. 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是"见机行事". 1.将图片转换为块级对象 即,设置img为"display:block;".在本例中添加一组CSS代码:"#sub img {display:block;}&q

Linux系统下无法访问mysql解决方法

  mysql是一个关系型数据库管理系统,但最近有用户反映,在Linux系统下无法访问mysql,相信不少用户都有遇到过这个问题,这是怎么回事呢?Linux系统下无法访问mysql该怎么办呢?下面我们一起来看看解决方法. 1.问题及异常 ThreadPoolAsynchronousRunner - com.mchange.v2.async.ThreadPoolAsynchronousRunner$DeadlockDetector@75d634ea -- APPARENT DEADLOCK!!!