/**
* 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);
分享到:
相关推荐
火狐下resize无效解决方案,解决火狐下资源resize事件无效问题方法
使用window.onresize let myChart = echarts.init(document.getElementById(dom)) window.onresize = function () { myChat.resize() } 优点:可以根据窗口大小实现自适应 缺点: 多个图表自适应写法比较麻烦...
React窗口调整大小侦听器触发窗口... npm install window-resize-listener-react --save用法如果要在多个组件中侦听窗口调整大小事件并基于该事件执行某些任务,则可以在多个组件中使用它。 import React from 'react';
方法一:在标签上加入 onLoad=”” onResize=”” 方法 写上对应的方法即可方法二:[removed]=function(){///…..} 在方法里面写上对应的代码即可着两种方法基本都可以解决你的问题了 代码如下: [removed]=...
[JavaScript]解决页面onresize缩放时多次调用的问题
window 的 onload、onresize、onscroll 事件,跟其他的事件不一样,它不能用 attachEvent 或 addEventListener 来添加。也就是说,它只能这样来(以 onload 为例,下同): 代码如下: [removed] = function() { // ...
window.onresize=function(){SetWidth()}; function SetWidth(){ if(!document.getElementById) return; var w=$("gallery").offsetWidth-20; if(w>0 && w!=null){ $("intro").style.width=w+"px"; $("details")....
window.onresize = enetresizeDiv; window.onerror = function(){} var enetdivTop,enetdivLeft,enetdivWidth,enetdivHeight,enetdocHeight,enetdocWidth,enetobjTimer,i = 0; function enetgetMsg()
Window Control Methods Section 13.9. The Location Object Section 13.10. The History Object Section 13.11. Multiple Windows and Frames Chapter 14. The Document Object Section 14.1. ...
onresize = debounce ( resize , 200 ) ; function resize ( e ) { console . log ( 'height' , window . innerHeight ) ; console . log ( 'width' , window . innerWidth ) ; } 若要稍后清除计时器并取消当前...
window.onresize=new Function("window.location.reload()") } function setmessage2(){ topmsg=new Layer(window.innerWidth) topmsg.bgColor=backgroundcolor regenerate2() topmsg.document.write(message) ...
function onResize(){ ww = canvas.width = window.innerWidth; wh = canvas.height = window.innerHeight; } ctx.strokeStyle = "red"; ctx.shadowBlur = 25; ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";...
cskin z最小化报错。 在 System.Drawing.BufferedGraphicsContext.CreateCompatibleDIB(IntPtr ... 在 System.Windows.Forms.NativeWindow.DebuggableCallback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam)
window.addEventListener("resize", () => this.onResize()); this.onResize(); this.updateBound = this.update.bind(this); requestAnimationFrame(this.updateBound); this.createSnowflakes(); } ...
锁定表头及固定左边列,原生JS原创代码 需要注意的问题: 1.表格的宽度以及表格每一列的宽度需要固定...2.0 增加 window.onresize事件监听(当触发 window.onresize时自动重新固定表头) 增加左边固定位置鼠标滚轮事件
(1) 通过window.onresize监听窗口大小。 (2) 在页面小于630px时会显示汉堡包菜单。监听按下时显示菜单。 5. 登入注册 (1) 在按下登入(注册)按钮时会通过正则判断输入的格式是否正确,不正确则会提示对应错误。 6. ...
(1) 通过window.onresize监听窗口大小。 (2) 在页面小于630px时会显示汉堡包菜单。监听按下时显示菜单。 5. 登入注册 (1) 在按下登入(注册)按钮时会通过正则判断输入的格式是否正确,不正确则会提示对应错误。 6. ...
用了[removed]但是发现每次 onresize 后页面中状态总是不对,下面与大家分享下onresize 事件多次触发的解决方法
window.onresize=regenerate",400)}window.onload=regenerate2if (document.all){document.write(‘‘)themenu=document.all.slidemenubar2.stylerightboundary=0leftboundary=-150}else{themenu=document....
onresize = debounceFn ( ( ) => {// Do something on window resize} , { wait : 100 } ) ;原料药debounceFn(输入,选项?) 返回一个去抖动的函数,该函数将延迟调用input函数,直到自上次调用该去抖动的函数...