window.removeEventListener(‘resize‘, handleResize)；

最新推荐文章于 2024-07-24 23:00:08 发布
最新推荐文章于 2024-07-24 23:00:08 发布
阅读量218 收藏
点赞数 1
分类专栏： react组件的显示隐藏 文章标签： 前端 javascript 开发语言 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56298427/article/details/137106533
版权
作者在调整页面布局时遇到Scripterror，通过将地图标签的显示逻辑改为利用浏览器的resize事件，成功解决了在小屏幕下页面适配的问题，分享了学习过程中的经验。
摘要由CSDN通过智能技术生成

今天在给页面适配屏幕宽度的时候遇到设计了一个功能：当页面宽带小与1024的时候不显示地图标签，起初我是这样写的

这样写了以后当页面宽度不变的时候是没问题的，虽然推到服务器以后运行没问题，但是在本地调试当页面渲染以后缩小页面到小于1024以后就会报错

Script error.

at handleError (http://localhost:3000/static/js/bundle.js:133032:58) at http://localhost:3000/static/js/bundle.js:133051:7

于是经过改进后写成这样

这里面新用到了resize来监听页面。

哈哈，又涨经验啦！！！

清水洗素颜
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
addEventListener()与removeEventListener()解析
08-30
主要为大家详细介绍了addEventListener()与removeEventListener()，用于处理指定和删除事件处理程序操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React读书笔记-组件特殊场景下的手动绑定事件1
08-08
同样，当组件卸载时，我们需要在`componentWillUnmount`中移除事件监听器，防止内存泄漏，即`window.removeEventListener('resize', this.handleResize)`。 另一个场景是处理React事件和阻止事件冒泡。在React中，...
vue 监听和移除window.removeEventListener事件
weixin_43276017的博客
06-10 4227
监听 mounted() { // 添加 resize 绑定事件 window.addEventListener( "resize",this.resizeLogic,false ); }, 解绑 /* 生命周期结束 */ beforeDestroy () { // 取消监听 window.removeEventListener("resize",this.resizeLogic); } ...
vue移除window窗口监听事件两种方法
进步的记录
07-22 1万+
例子：页面窗口变化时，echarts绘制的视图需要resize()，这时需要监听window，但是当组件消耗时也需要移除窗口监听事件。 涉及到的data数据和methods //data data(){ return{ timer:null, // 记录setTimeout chartForm:null, // echarts视图 } } //methods chartResize(){ //防抖 if(this.timer) clearTimeout(th
window.addEventListener和window.removeEventListener
H_ZMY的博客
09-14 923
removeEventListener addEventListener
window.removeEventListener移除事件监听不生效？
weixin_42229667的博客
03-13 787
window.removeEventListener移除事件不生效？第二参数必须传入创建监听时传入的那个函数
事件监听与移除事件监听
cristina_song的博客
10-22 1万+
Navigator onLine 属性:一个只读的布尔值，声明了系统是否处于脱机模式。 addEventListener() 事件监听 emoveEventListener() 移除事件监听 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 “click” 或 “mousedown”). 第二个参数是...
js绑定事件和解绑事件：addEventListener和removeEventListener
xmy_wh的博客
11-29 4580
addEventListener()和removeEventListener()用来绑定事件和解绑事件 它们都接受3个参数addEventListener(eventName，function，true) 第三个参数为true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序 例如： window.addEventListener('resize',function...
react无状态组件(1).pdf
09-13
window.removeEventListener('resize', this.handleResize); } handleResize() { this.setState({ viewportWidth: window.innerWidth }); } render() { return <Input {...this.props} viewportWidth={this...
万能的vue项目中echarts图表自适应解决方法.zip
10-21
window.removeEventListener('resize', this.handleResize); this.chartInstance.dispose(); this.chartInstance = null; } }, methods: { initChart() { const chartDom = this.$refs.chart; this.chart...
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
11-19
window.removeEventListener('resize', this.handleResize); }, methods: { handleResize() { EventBus.$emit('resizeEvent'); } } // 在子组件中 mounted() { EventBus.$on('resizeEvent', this.handleResize...
React 无状态组件(Stateless Component) 与高阶组件
10-18
window.removeEventListener('resize', this.handleResize); } handleResize = () => { this.setState({ viewport: { width: window.innerWidth, height: window.innerHeight }, }); } render() { return...
vue3 监听resize窗口事件,离开页面要销毁窗口事件。
热门推荐
weixin_46409887的博客
02-14 1万+
vue3 监听resize窗口事件,频繁触发的bug解决。
vue中给window添加和移除resize事件遇到的坑
qq_43561241的博客
07-26 7790
在vue项目中需要监听window窗口变化来时时计算图片的高度，于是就加了一个监听事件；确实监听到了，但是在离开当前页面进入其他页面改变窗口大小时发现window还是处于监听状态，，即移除监听事件并没有生效。 //之前的写法，这样写移除监听事件无效 mounted(){ window.addEventListener('resize',()=>{ ...
window.onresize的详细使用
weixin_41886421的博客
03-10 7355
window.onresize的详细使用
10个有用的自定义钩子函数vue.js
lb6514052的博客
04-15 922
Vue 是我使用的第一个 JS 框架。可以说，Vue 是我进入JavaScript世界的第一道门之一。目前，Vue 仍然是一个很棒的框架。随着 composition API 的出现，Vue 只会有更大的发展。在这篇文章中，我将介绍 10 个有用的自定义钩子，让我们的代码更加好看。 useWindowResize 这是一个基本的钩子，因为它被用在很多项目中. import { ref, onMounted, onUnmounted } from 'vue'; export functio...
window.resize监听页面放大缩小不好用
z001126的博客
11-07 783
使用 Math.max 取最大字就可以兼容两种情况。这个时候我们可以通过VisualViewport来实现。缩放时，事情很好办，使用 resize 事件即可。但是如果换成 Mac 的触摸板双指缩放就不行了。获取缩放比，键盘缩放，可以使用。经过测试，双指缩放 可以使用。对于用户使用键盘。
Three.js - 监听window 的 resize 事件，使浏览器窗口变动自适应
ithanmang
06-24 7561
通过是添加 window 的 resize 事件，根据浏览器窗口的变动更新相机的aspect以及 渲染器的渲染范围，实现自适应的效果。 本示例浏览地址：http://www.ithanmang.com/threejshome/20180624/02-windowResize.html 示例代码： &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html lang=&amp;amp;quot;
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 804
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
window.removeEventListener必须有两个参数么
06-09
window.removeEventListener('resize', handleResize2) ``` 如果我们不指定要移除的事件处理函数，那么就会将该事件类型的所有事件处理函数都移除，这可能会导致意外的行为。因此，在调用 `window....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值