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

 更新时间:2014年03月08日 09:48:53   转载 作者:  
本篇文章主要是对关于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
    }
}

相关文章

  • 在Layui中操作数据表格,给指定单元格添加事件示例

    在Layui中操作数据表格,给指定单元格添加事件示例

    今天小编就为大家分享一篇在Layui中操作数据表格,给指定单元格添加事件示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 给easyui datebox扩展一个清空的实例

    给easyui datebox扩展一个清空的实例

    下面小编就为大家带来一篇给easyui datebox扩展一个清空按钮的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js导出格式化的excel 实例方法

    js导出格式化的excel 实例方法

    最常见的方式是使用js函数操作excle文件,这种方式可能因浏览器不同,存在兼容性问题。另一种简单方法就是导出一个excel能识别格式的xml文件,用excel打开。
    2013-07-07
  • 使用JavaScript实现点击循环切换图片效果

    使用JavaScript实现点击循环切换图片效果

    本文通过实例代码给大家介绍了通过js实现点击循环切换图片效果,需要的朋友参考下
    2017-09-09
  • JS实现常见的查找、排序、去重算法示例

    JS实现常见的查找、排序、去重算法示例

    这篇文章主要介绍了JS实现常见的查找、排序、去重算法,结合实例形式总结分析了JavaScript线性查找、二分查找、递归查找、数组去重、冒泡拍戏、快速排序实现技巧,需要的朋友可以参考下
    2018-05-05
  • JScript中的条件注释详解

    JScript中的条件注释详解

    这篇文章主要介绍了JScript中的条件注释详解,本文讲解了@cc_on、@if、@set、@_win32、@_win16、@_mac等条件注释语句及可用于条件编译的预定义变量,需要的朋友可以参考下
    2015-04-04
  • Smartour 让网页导览变得更简单(推荐)

    Smartour 让网页导览变得更简单(推荐)

    这篇文章主要介绍了Smartour 让网页导览变得更简单(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • JS定时器实现数值从0到10来回变化

    JS定时器实现数值从0到10来回变化

    最近做项目遇到一需求要求实现数值从0到10来回变化,下面小编给大家分享下实现代码,需要的朋友参考下
    2016-12-12
  • 微信小程序实现签到功能

    微信小程序实现签到功能

    这篇文章主要为大家详细介绍了微信小程序实现签到功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • JS图片压缩(pc端和移动端都适用)

    JS图片压缩(pc端和移动端都适用)

    本文主要分享了JS图片压缩的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论