vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式

 1 //  开始这样写,不执行
 2  window.onresize = function() {
 3      console.log(‘窗口发生变化‘)
 4 }
 5
 6
 7 // 改成window监听事件
 8 window.addEventListener(‘resize‘, function() {
 9     console.log(‘窗口发生变化‘)
10 })

onresize的定义方式

一、直接在html中定义

如<body onresize="doResize()"/>

二、直接给onresize赋值

可以给window和body的onresize赋值

如window.onresize=function(){},document.body.onresize=function(){}

三、使用事件监听

只对window有作用

如window.addEventListener("resize",fn);

说明:

1、直接给onresize赋值会覆盖在html中定义。

2、直接给onresize赋值,window,body只有一个起作用,后定义的会覆盖先定义的

3、事件监听只对window有效,可以其它方式同时触发。

 1 1.浏览器尺寸变化响应事件 :
 2
 3 Js代码  收藏代码
 4 window.onresize = function(){....}
 5
 6
 7   获取变更后参数:
 8
 9
10
11 Js代码  收藏代码
12 // 获取到的是变更后的页面宽度
13 var currentWidth = document.body.clientWidth;
14   这里需要注意的是,onresize响应事件处理中,因为已经刷新页面,所以获取到的页面尺寸参数是变更后的参数。
15
16
17
18   如果需要使用到变更之前的参数,需要建一个全局变量保存之前的参数(并且记得在onresize事件中刷新这个全局变量保存新的参数值)。
 1 2.谷歌浏览器中  window.onresize 事件默认会执行两次(偶尔也会只执行一次,网上大部分说法认为这是Chrome的bug)。
 2
 3   解决方法:(为resize设置一个延迟)一般来说推荐新建一个标志位 延时复位控制它不让它自己执行第二次,代码如下:
 4
 5
 6
 7 Js代码  收藏代码
 8 var firstOnResizeFire = true;//谷歌浏览器onresize事件会执行2次,这里加个标志位控制
 9
10 window.onresize = function()
11 {
12  if (firstOnResizeFire) {
13   NfLayout.tabScrollerMenuAdjust(homePageWidth);
14   firstOnResizeFire = false;
15
16   //0.5秒之后将标志位重置(Chrome的window.onresize默认执行两次)
17   setTimeout(function() {
18    firstOnResizeFire = true;
19         }, 500);
20  }
21
22  homePageWidth = document.body.clientWidth; //重新保存一下新宽度
23 }
24
25
26
27
28 例子:
29
30 监听屏幕的改变:
31
32 Html代码  收藏代码
33 <!DOCTYPE html>
34 <html>
35 <head lang="en">
36     <meta charset="UTF-8">
37     <title></title>
38     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
39     <meta content="telephone=no" name="format-detection">
40 </head>
41 <body>
42 <label id="show"></label>
43 <script>
44     window.onresize = adjuest;
45     adjuest();
46     function adjuest(){
47        var label = document.getElementById("show");
48        label.innerHTML = "width = "+window.innerWidth+";height="+window.innerHeight;
49     }
50 </script>
51 </body>
52 </html>  

效果:

 1 2 .监听div大小的改变
 2
 3
 4
 5 Html代码  收藏代码
 6 <!DOCTYPE html>
 7 <html>
 8 <head lang="en">
 9     <meta charset="UTF-8">
10     <title></title>
11 </head>
12 <body>
13 <div id="show_div" style="background-color: lightblue;width: 100%;height: 300px;"></div>
14 <label id="show"></label>
15 <script>
16     window.onresize = adjuest;
17     adjuest();
18     function adjuest(){
19         var label = document.getElementById("show");
20         var divCon = document.getElementById("show_div");
21         label.innerHTML = "width = "+divCon.offsetWidth+";height="+divCon.offsetHeight;
22     }
23 </script>
24 </body>
25 </html>  

效果:

vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式

原文地址:https://www.cnblogs.com/ajaxlu/p/12072049.html

时间: 2024-10-27 02:56:25

vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式的相关文章

vue中计算属性,方法,侦听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中计算属性,方法,侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="app&qu

对vue中的computed属性,watch监听,计算属性理解

自己的理解: computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理: computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化.这里的这个总金额使用computed属性来进行计算是最

vue中eventbus被多次触发(vue中使用eventbus踩过的坑)【bus.$on事件被多次绑定】

问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发 触发bus.$on中绑定的方法.png bus.$on多次绑定.png 解决办法:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on ) bus.$off("backUpLevel"); bus.$on('backUpLevel', () => { if(self.ONION.length <= 1){ self.jumpSubDir() }el

[Phonegap+Sencha Touch] 移动开发16 安卓webview中,input输入框不触发backspace回退键事件的解决办法

可以用安卓手机浏览器打开 http://javascript.info/tutorial/keyboard-events#test-stand-test-stand 测试看看. Android 4.2自带浏览器和webview的测试结果(其他版本没试过,估计4.X都是这样): 当input有内容的时候,点击软键盘回退键(keyCode=8),是有keyEvents事件(keyup keydown)触发的:当input是空的时候,再点击,就不触发keyEvents了. Chrome浏览器测试结果:

父窗口jquery触发iframe按钮事件(转载)

原文地址: http://blog.csdn.net/muziduoxi/article/details/11123923 <script type="text/javascript">$(document).ready(function(e){     var iframe = document.getElementById("Box");      if (iframe.attachEvent) {          iframe.attachEve

vue中的事件监听机制

事件监听 基础用法 监听dom事件使用v-on指令: v-on:事件类型="一个函数" .这个事件类型可以自定义. v-on 指令绑定事件后,就会监听相应的事件,并在触发时运行一些 JavaScript 代码. <div id="box1"> <button v-on:click="counter += 1">点我</button> <p>已点击 {{ counter }} 次</p>

vue中$watch源码阅读笔记

项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单的$watch: 1 const v = new Vue({ 2 data:{ 3 a: 1, 4 b: { 5 c: 3 6 } 7 } 8 }) 9 // 实例方法$watch,监听属性"a" 10 v.$watch("a",()=>console.log(&

Vue中watch-computed-methods

Vue中watch-computed-methods watch 作用 用来监听data中定义的数据,当data中定义的数据发生了变化,那么watch中的key就会触发 watch是一个对象 watch: {} watch中可以设置多个类型的键值 使用方式( 重点 ) 方法 watch: { fn () {} } 对象: ( 深度监听 ) watch: { fn: { handler(){}, deep: true } } ## 计算属性 1. 使用方式 - 里面存放方法 ```javascri

横冲直撞vue(第三篇):vue中template的三种写法、v-bind、v-on、更新元素的指令v-text与v-html、条件渲染指令v-if 与v-show、v-for

一.vue中template的三种写法 第一种(字符串模板写法): 直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. <body> <div id="app"></div> <script src="./lib/vue.js"></script> <script type="text/javascript&qu