IE6下focus与blur错乱的解决方案

 更新时间:2011年07月31日 23:16:14   作者:  
Miller同学发现的IE6 bug:如以下代码,点击textarea时,引发window的blur,导致focus与blur配对混乱
复制代码 代码如下:

<body>
<textarea></textarea>
hello
<script>
window.onblur=function(){
document.title= 'blur:' + Math.random() ;
}
window.onfocus=function(){
document.title= 'focus:' + Math.random() ;
}
</script>
</body>

这应该是一个很常见的需求,例如,当前窗口定期更新数据,而窗口失焦则减少信息更新频率。IE6的bug导致的配对混乱却会打乱我们的计划。
上网查也没查出关于这个bug的官方说明与推荐解决方案,只好自己生更的实现一个解决方案。
代码如下:
复制代码 代码如下:

<body>
<textarea></textarea>
hello
<script>
(function(){
var focusTimer = 0;
function myBlur(){
document.title= 'blur:' + Math.random() ;
}
function myFocus(){
clearTimeout(focusTimer);
focusTimer = setTimeout(function(){
document.title = 'focus:' + Math.random() ;
},10);
}
window.onfocus = document.body.onfocusin = myFocus;
window.onblur = document.body.onfocusout = myBlur;
}());
</script>
</body>

大略原理是:找到很多可能触发onfocus与onblur的时机,所有的onblur都立即执行,而onfocus则延时10毫秒懒惰执行。
结果是:虽说有时多执行了几次myFocus与myBlur,但能保证窗口状态的正确性。
方法可能有点山寨,不过一时没想到更好的办法,这样也暂时能解个燃眉之急。

相关文章

  • JS函数的返回值如何使用

    JS函数的返回值如何使用

    函数是一块js代码块,被定义一次但可以执行和调用多次,js中的函数也是对象可以像其他对象那样操作和执行,js函数也被称为函数对象,本文给大家介绍JS函数的返回值如何使用,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • 微信小程序如何调用json数据接口并解析

    微信小程序如何调用json数据接口并解析

    这篇文章主要介绍了微信小程序如何调用json数据接口并解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-06-06
  • jQuery获取随机颜色的实例代码

    jQuery获取随机颜色的实例代码

    这篇文章主要介绍了jQuery获取随机颜色的实例代码,非常不错,具有一定的参考借鉴价值,感兴趣的朋友跟随脚本之家小编来学习吧
    2018-05-05
  • JS生态系统加速Tailwind CSS工作原理探究

    JS生态系统加速Tailwind CSS工作原理探究

    这篇文章主要为大家介绍了JS 生态系统加速Tailwind CSS使用及工作原理探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • JavaScript基于ChatGPT实现打字机消息回复

    JavaScript基于ChatGPT实现打字机消息回复

    ChatGPT 是一个基于深度学习的大型语言模型,处理自然语言需要大量的计算资源和时间,响应速度肯定比普通的读数据库要慢的多,本文介绍了ChatGPT打字机消息回复实现原理,感兴趣的同学可以跟着小编一起学习
    2023-05-05
  • JavaScript模块化原理深入分析

    JavaScript模块化原理深入分析

    JavaScript中的模块化是指将每个js文件会被认为单独一个的模块。模块之间是互相不可见的。如果一个模块需要使用另一个模块,那么需要通过指定语法来引入要使用的模块,而且只能使用引入模块所暴露的内容
    2022-11-11
  • setInterval和setTimeout停止的方法

    setInterval和setTimeout停止的方法

    要想知道它们是怎么停止的,首先我们要了解它们的运行机制和原理,下面是具体的介绍。
    2011-01-01
  • js类中获取外部函数名的方法

    js类中获取外部函数名的方法

    js类中获取外部函数名的方法...
    2007-08-08
  • javascript产生随机数方法汇总

    javascript产生随机数方法汇总

    这篇文章主要介绍了javascript产生随机数方法汇总的相关资料,需要的朋友可以参考下
    2016-01-01
  • JavaScript限定图片显示大小的方法

    JavaScript限定图片显示大小的方法

    这篇文章主要介绍了JavaScript限定图片显示大小的方法,涉及javascript针对图片的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03

最新评论