修复lte ie8 & chrome 下window 的resize 事件多次执行
/**
* 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);
|