onresize 事件通过监听对象的高和宽,其中任何一个属性发生变化都会触发 onresize 事件。
楼上提到的解决方法存在问题。
// 只能解决楼上提到触发两次的情况,实际浏览器的 resize 事件可能会触发 n 次,持续时间并不一定是 100 毫秒,例如用户拖动浏览器的边框,以下代码会执行多次 callback 事件; function windowResizeEvent(callback) { var firstFire = null; window.onresize = function () { if(firstFire === null) { firstFire = setTimeout(function() { firstFire = null; callback(); }, 100); } } } // 改进代码 function windowResizeEvent(callback) { window.onresize = function() { var target = this; if (target.resizeFlag) { clearTimeout(target.resizeFlag); } target.resizeFlag = setTimeout(function() { callback(); target.resizeFlag = null; }, 100); } }
除了 window 对象,其他 html 标签好像并不支持 onresize 事件,定义了之后并不会触发。
发现浏览器窗口缩小时会触发两次 onresize 事件,解决方法:
当浏览器窗口大小改变的时候将会触发onresize事件。
可以监控该事件的发生做一些响应式的处理:
JS:
window.onresize(function(){ //code }):
jQuery:
$(window).resize(function(){ //code });
在监控的过程中发现每次改变浏览器窗口的时候 onresize 事件都会触发两次(产生 的原因貌似比较复杂,网上没有定论,发现在最大化浏览器的时候,浏览器也会闪一下,有两次窗口大小的改变)。
解决方法: setTimeout()
function windowResizeEvent(callback) { var firstFire = null; window.onresize = function () { if(firstFire === null) { firstFire = setTimeout(function() { firstFire = null; callback(); }, 100); } } }
img 使用 onerror 以后,如果 onerror 指定的图片也是不存在的话,会出现无限死循环 404。
解决方法:
<img src="image.gif" onerror="javascript:this.src='src/images/default.jpg';this.onerror = null">
经常会有一些在用户离开页面前执行一些业务的应用场景,这都要用到 onbeforeunload 事件;比如记录用户停留时长的业务,在 GA 等页面访问统计的应用中都包含这个:
;(function(){ var startTime = Math.ceil(new Date().getTime()/1000), //单位秒 getDuration = function(){ var time = '', hours = 0, minutes = 0, seconds = 0, endTime = Math.ceil(new Date().getTime()/1000), duration = endTime - startTime; hours = Math.floor(duration/3600); //停留小时数 minutes = Math.floor(duration%3600/60); //停留分钟数 seconds = Math.floor(duration%3600%60); //停留秒数 time = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); return time; }; window.onbeforeunload = function(e){ var duration = getDuration(); //request(duration); }; })();
匹配键盘左右键。
document.addEventListener("keydown",keydown); //键盘监听,注意:在非ie浏览器和非ie内核的浏览器 //参数1:表示事件,keydown:键盘向下按;参数2:表示要触发的事件 function keydown(event){ //表示键盘监听所触发的事件,同时传递参数event switch(event.keyCode){ case 37: alert("左键"); break; case 39: alert("右键"); break; } }
感谢您的支持,我会继续努力的!
支付宝扫一扫,即可进行扫码打赏哦
2533onresize 事件通过监听对象的高和宽
onresize 事件通过监听对象的高和宽,其中任何一个属性发生变化都会触发 onresize 事件。
楼上提到的解决方法存在问题。
除了 window 对象,其他 html 标签好像并不支持 onresize 事件,定义了之后并不会触发。
2532修改浏览器窗口大小触发两次 onresize 事件的解决方法
发现浏览器窗口缩小时会触发两次 onresize 事件,解决方法:
当浏览器窗口大小改变的时候将会触发onresize事件。
可以监控该事件的发生做一些响应式的处理:
JS:
jQuery:
在监控的过程中发现每次改变浏览器窗口的时候 onresize 事件都会触发两次(产生 的原因貌似比较复杂,网上没有定论,发现在最大化浏览器的时候,浏览器也会闪一下,有两次窗口大小的改变)。
解决方法: setTimeout()
2531该事件在即将离开页面(刷新或关闭)时触发 2 onerror
img 使用 onerror 以后,如果 onerror 指定的图片也是不存在的话,会出现无限死循环 404。
解决方法:
2530图像的加载被中断 ( object ) 2 onbeforeunload
经常会有一些在用户离开页面前执行一些业务的应用场景,这都要用到 onbeforeunload 事件;比如记录用户停留时长的业务,在 GA 等页面访问统计的应用中都包含这个:
2529鼠标按键被松开 2 键盘事件属性 描述 DOM onkeydown
匹配键盘左右键。