网上找了一些ie6、7这个著名bug的解决方案,要么要延时要么将onresize绑定到div或者body上感觉总不是那么严谨。找了一个感觉严谨的,供大家参考代码如下
/**
* 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 {
init: function(){
if(lazy){ //懒执行
if(window.addEventListener){
window.addEventListener('resize', listener, false);
}else{
window.attachEvent('onresize', listener);
}
lazy = false;
}
},
add: function(fn){
if(typeof fn === 'function'){
this.init();
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;
},
insert: function(index,fn){
if(typeof fn === 'function'){
this.init();
var len=queue.length;
if(index>=len){
queue[index]=fn;
}else{
for(var i=len-1;i>=index;i--){
queue[i+1]=queue[i];
}
queue[index]=fn;
}
}else{ }
return this;
},
trigger: function(){
var len=queue.length;
for(var i=0;i<len;i++){
queue[i]();
}
}
};
}.call(this);
分享到:
相关推荐
火狐下resize无效解决方案,解决火狐下资源resize事件无效问题方法
[JavaScript]解决页面onresize缩放时多次调用的问题
浏览器窗口大小变化时使用resize事件对框架不起作用的解决办法,如下: 代码如下:$(window).resize(function(){var surH = $(window).height();$(“.pic_conent”).height(surH);} 当浏览器变化,拉大拉小时,没有...
解决方案: 代码如下:// IE浏览器下将onresize事件放在div上if(navigator.userAgent && navigator.userAgent.toLowerCase().indexOf(“msie”)>-1){ document.body[removed] = ‘<div onresize=”...
增加了IE6/IE7/IE8 启用设置参数(ieLowVersionEnabled: true|false) ,默认不启用, 注:IE6/7/8锁定表头 由于兼容性问题,有些情况下会有一些错位的问题 1.5 增加了 显示/隐藏功能,修正了非IE浏览器下列宽错位...
window 的 onload、onresize、onscroll 事件,跟其他的事件不一样,它不能用 attachEvent 或 addEventListener 来添加。也就是说,它只能这样来(以 onload 为例,下同): 代码如下: [removed] = function() { // ...
主要介绍了浅谈javascript属性onresize的详细使用方法,十分的实用,这里推荐给大家,有需要的小伙伴可以参考下。
之前做一个扩展,需要在改变窗口大小的时候保证页面显示正常,于是用了 [removed] 但是发现每次 onresize 后页面中状态总是不对,后来查找出来原来是 onresize 事件触发了多次找成的,于是网上搜集了下解决办法,...
javascript 利用onresize使得div可以随着屏幕大小而自适应的代码
* onResize:当浏览器的窗口大小被改变时触发的事件 * onScroll:浏览器的滚动条位置发生变化时触发的事件 * onStop:浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断 * onUnload:当前页面将被改变时...
尤其在IE中使用onresize事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件连续触发。在 onresize事件处理程序内部如果尝试进行DOM操作,其高频率的更改可能会让浏览器崩溃。 函数节流背后的基本思想是...
13.3.3 onResize事件处理函数 13.4 鼠标事件处理 13.4.1 怎样使用鼠标事件 13.4.2 鼠标事件和图像——翻转 13.4.3 通过鼠标事件创建幻灯片 13.5 处理链接事件 13.6 处理表单事件 ...
一个 React 钩子,允许您使用 ...在真实浏览器中测试(目前最新的 Chrome、Firefox、Edge、Safari、Opera、IE 11、iOS 和 Android,由 BrowserStack 赞助) 更多详情、使用方法,请下载后阅读README.md文件
NULL 博文链接:https://747017186.iteye.com/blog/1977133
vue使用echarts图表自适应的几种解决方案 1.使用window.onresize let myChart = echarts.init(document.getElementById(dom)) window.onresize = function () { myChat.resize() } 优点:可以根据窗口大小...
8.1.3 onresize事件 154 8.1.4 onmove事件 156 8.1.5 onabort事件 156 8.1.6 onerror事件 156 8.1.7 onfocus事件 156 8.1.8 onblur事件 157 8.2 处理鼠标事件 158 8.2.1 onmousedown事件 158 8.2.2...
iphone能很好的使用onorientationchange事件,但是android的onresize事件即使不旋转也会触发多次
一、JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.键盘事件: keydown:键盘按下时触发 ...