修复ie8&chrome下window的resize事件多次执行

 更新时间:2011年10月20日 23:39:00   作者:  
window.onresize 事件 专用事件绑定器 v0.1,用于解决 lte ie8 & chrome 及其他可能会出现的 原生 window.resize 事件多次执行的 BUG.
复制代码 代码如下:

/**
* window.onresize 事件 专用事件绑定器 v0.1 Alucelx
* http://www.cnblogs.com/Alucelx/archive/2011/10/20/2219263.html
* <description>
* 用于解决 lte ie8 & chrome 及其他可能会出现的 原生 window.resize 事件多次执行的 BUG.
* </description>
* <methods>
* add: 添加事件句柄
* remove: 删除事件句柄
* </methods>
*/
var onWindowResize = function(){
//事件队列
var queue = [],
indexOf = Array.prototype.indexOf || function(){
var i = 0, length = this.length;
for( ; i < length; i++ ){
if(this[i] === arguments[0]){
return i;
}
}
return -1;
};
var isResizing = {}, //标记可视区域尺寸状态, 用于消除 lte ie8 / chrome 中 window.onresize 事件多次执行的 bug
lazy = true, //懒执行标记
listener = function(e){ //事件监听器
var h = window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight,
w = window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth;
if( h === isResizing.h && w === isResizing.w){
return;
}else{
e = e || window.event;
var i = 0, len = queue.length;
for( ; i < len; i++){
queue[i].call(this, e);
}
isResizing.h = h,
isResizing.w = w;
}
}
return {
add: function(fn){
if(typeof fn === 'function'){
if(lazy){ //懒执行
if(window.addEventListener){
window.addEventListener('resize', listener, false);
}else{
window.attachEvent('onresize', listener);
}
lazy = false;
}
queue.push(fn);
}else{ }
return this;
},
remove: function(fn){
if(typeof fn === 'undefined'){
queue = [];
}else if(typeof fn === 'function'){
var i = indexOf.call(queue, fn);
if(i > -1){
queue.splice(i, 1);
}
}
return this;
}
};
}.call(this);

绑定window 的 resize 事件,请使用这个对象
示例:
复制代码 代码如下:

var _fn = function(){document.body.innerHTML += "1"};
onWindowResize.add(_fn)
.add(function(){document.body.innerHTML += "2"})
.add(function(){document.body.innerHTML += "3"})
.remove(_fn);

相关文章

  • js模拟3D场景效果代码打包

    js模拟3D场景效果代码打包

    这几个demo上星期平安夜做的,感觉效果不错,就放在出来,分享给大家
    2012-01-01
  • js获取input标签的输入值实现代码

    js获取input标签的输入值实现代码

    input标签的输入值通过js进行获取,部分标签和类是封装在框架内的,其效果和html标签差不多,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • js查找节点的方法小结

    js查找节点的方法小结

    这篇文章主要介绍了js查找节点的方法,实例总结了查找节点常用的三种方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • js控制页面控件隐藏显示的两种方法介绍

    js控制页面控件隐藏显示的两种方法介绍

    两种方法的不同之处在于控件隐藏后是否还在页面上占位,详细的示例代码如下,大家可以感受下
    2013-10-10
  • JS实现可拖曳、可关闭的弹窗效果

    JS实现可拖曳、可关闭的弹窗效果

    这篇文章主要介绍了JS实现可拖曳、可关闭的弹窗效果,可实现点击文字弹出可拖动的窗口,同时背景出现变暗的遮罩效果,点击遮罩层即可关闭弹出,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 利用ASP发送和接收XML数据的处理方法与代码

    利用ASP发送和接收XML数据的处理方法与代码

    利用ASP发送和接收XML数据的处理方法与代码...
    2007-11-11
  • 如何实现移动端浏览器不显示 pc 端的广告

    如何实现移动端浏览器不显示 pc 端的广告

    随着移动网络的发展,越来越多的人使用手机等移动端浏览网页办公,那么如果在手机打开页面的时候显示大大的联盟广告,用户体验度会非常差,经过一番研究,用下面的方法实现了移动端浏览器不显示PC端广告。
    2015-10-10
  • JS异步加载的三种实现方式

    JS异步加载的三种实现方式

    本篇文章主要介绍了JS异步加载的三种实现方式,有些时候我们需要JS异步加载,这里整理了详细的代码,有需要的小伙伴可以参考下。
    2017-03-03
  • uniapp微信小程序强制更新解决示例详解

    uniapp微信小程序强制更新解决示例详解

    这篇文章主要为大家介绍了uniapp微信小程序强制更新解决的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • Ajax 加载数据 练习代码

    Ajax 加载数据 练习代码

    这篇文章主要介绍了Ajax 加载数据,主要是为了查询表的显示,不用嵌入php通过ajax调用,现在手机端的更多显示功能都是通过ajax实现的
    2017-01-01

最新评论