Uncaught TypeError: Cannot read properties of undefined (reading ‘getBoundingClientRect‘)

最新推荐文章于 2024-07-12 00:15:14 发布
最新推荐文章于 2024-07-12 00:15:14 发布
阅读量5.2k 收藏
点赞数 3
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60316162/article/details/131644303
版权
文章讨论了在Vue应用中使用ref属性为div元素设置ID并绑定滚动事件时，可能出现的`getBoundingClientRect`报错情况。原因是页面切换后，原先绑定的事件仍然存在，但对应的DOM元素已经销毁。解决方案包括在访问属性前检查元素是否存在，以及在组件销毁时解除事件监听。
摘要由CSDN通过智能技术生成

使用 ref 为 div 元素赋予一个ID引用 "more"

<div ref="more" class="header">{{ more }}</div>

绑定滚动事件，获取该 div 距浏览器窗口顶端的距离

 let scrollHeight = this.$refs.more.getBoundingClientRect().top;

经常出现报错：Uncaught TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect') 

原因：应该是你在某个页面内绑定了window滚动事件，this.$refs.more是该页面下才能获取到该div对象，切换页面时window绑定的事件还在，但页面销毁，页面中的this.$refs.more找不到就报错了

解决办法：1.使用该属性前先添加该div对象是否存在的判断；
                  2.组件销毁的时候解除监听。

OnlyCong
关注
vue 使用getBoundingClientRect() 获取元素位置 报错
weixin_43376571的博客
06-01 1万+
vue 使用getBoundingClientRect() 获取元素位置 报错Uncaught TypeError: Cannot read property ‘getBoundingClientRect’ of undefined 在mounted生命周期注册事件 mounted () { window.addEventListener('scroll', this.handleScroll, true) } 在methods里面监听使用 handleScroll () {
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘data‘)
love_dzq的博客
01-12 3万+
Promise当想在调用接口获取到数据之前进行一些操作。 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data')
Cannot read property ‘getBoundingClientRect‘ of undefined 报错
qq_41446162的博客
04-15 1万+
错误如上图所示Cannot read property 'getBoundingClientRect' of undefined 代码：在该方法中使用了getBoundingClientRect() loadMore() { let basic = document.getElementsByClassName("ue-editor")[0].getBoundingClientRect(); } 代码：在mouted中调用了（监听滚动条事件） mounted() { ...
【JavaScript】解决 JavaScript 语言报错：Uncaught TypeError: Cannot read property ‘X‘ of undefined
最新发布
Easonmax的博客
07-12 2286
在 JavaScript 编程中，“Uncaught TypeError: Cannot read property ‘X’ of undefined” 是一种非常常见的运行时错误。这个错误通常发生在尝试访问一个未定义或未初始化对象的属性时。函数getUser返回未定义的值，访问其name属性自然会报错。// 错误代码let data;// 修正代码。
TypeError: Cannot read properties of undefined (reading ‘getBoundingClientRect‘)
lemon今天学习了吗？的博客
09-28 1万+
一、报错如下：TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')三、原因：主要可能是跟el有关 ，我这边代码逻辑没有问题，是在vant组件的tab切换时出现该报错。主要时因为 v-if 后找不到该结点，切换到其他没有tab的页面就会报错。二、解决：将判断的 v-if 改成 v-show 报错消失。
“TypeError: Cannot read properties of undefined (reading ‘getBoundingClientRect‘)“
weixin_45506358的博客
12-27 1561
vant报错"TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')"
解决:Uncaught TypeError: Cannot read properties of undefined (reading ‘props‘)
热门推荐
Trsunny_的博客
11-11 5万+
今天在react中子父传参里, 点击按钮向父组件传递信息时出现了这个错误如图:↓ 这个问题很明显, 从字面意思看就是props前面的这个值没有找到, 然后看源码里面, 前面是个this, 如下图: 也就是在点击下面的button按钮时, 本来应该执行上面的sendMessage, 将父组件内容改掉, 可是却没有找到props前面的this, 然后测试在sendMessage方法中直接打印this , 发现是 undefined, 也就是说根本就没有this, 当然无法调用this里面的props
Cannot read property ‘getBoundingClientRect‘ of undefined
hello world
06-25 2639
在vue中使用滚动监听，当切换页面时会报错 解决方法： 在监听滚动页面关闭的时候清除滚动监听 beforeDestroy () { window.removeEventListener('scroll', this.handleScrollx,true); }, 起始我没有在清除函数中添加true参数，在一个帖子中找到了解释（https://segmentfault.com/q/1010000010117564） ...
Uncaught TypeError: Cannot read properties of undefined (reading ‘use‘)
lznmvp777的博客
08-11 2万+
解决由于vue版本不同导致路由模块无法使用的问题
Uncaught TypeError: Cannot read properties of undefined (reading 'addImageryProvider')
08-23
Uncaught TypeError: Cannot read properties of undefined (reading 'addImageryProvider') 是一种常见的错误。这个错误通常发生在JavaScript代码中，当你尝试读取一个未定义的属性时会出现。根据提供的引用内容，...
Uncaught TypeError: Cannot read properties of undefined (reading 'tilingScheme')
08-29
Uncaught TypeError: Cannot read properties of undefined (reading 'tilingScheme')这个错误通常出现在JavaScript代码中，表示尝试读取一个未定义的属性'tilingScheme'。根据引用内容，这个错误可能与访问一个空...
jsp结尾的文件出现 Uncaught TypeError: Cannot read properties of undefined (reading 'ajax')
08-16
这个报错信息提示了一个Uncaught TypeError: Cannot read properties of undefined (reading 'ajax')错误。根据引用的信息，这个错误通常发生在尝试读取未定义属性时。根据引用的信息，这个错误可能是因为在某个页面...
Uncaught TypeError: Cannot read properties of undefined (reading 'normalize') at b.mouseMoveHandler
09-01
这个错误提示是"Uncaught TypeError: Cannot read properties of undefined (reading 'normalize') at b.mouseMoveHandler"。根据引用，这个错误通常发生在JavaScript代码中尝试读取未定义属性时。在这种情况下，它...
"TypeError: Cannot read properties of undefined (reading '0')"什么意思
08-30
- *1* *2* *3* [Uncaught TypeError: Cannot read properties of undefined (reading ‘getBoundingClientRect‘)](https://blog.csdn.net/m0_60316162/article/details/131644303)[target="_blank" data-report-...
Uncaught TypeError: Cannot read properties of undefined (reading ‘state‘)
weixin_40945354的博客
03-09 3583
之前可能是main.js里的 import { createApp } from 'vue' import App from './App.vue' import store from './store' createApp(App).use(store).mount('#app') 没放对位置
Uncaught TypeError: Cannot read properties of undefined (reading ‘slice‘)
流动的城堡的博客
11-29 6652
Cannot read properties of undefined (reading 'slice')
Uncaught TypeError: Cannot read properties of undefined (reading ‘focus‘)
jiaxiaohong_csdn的博客
12-07 1980
Uncaught TypeError: Cannot read properties of undefined (reading 'focus')
Uncaught TypeError: Cannot read properties of undefined (reading ‘setState‘)
weixin_46543056的博客
01-20 2万+
Uncaught TypeError: Cannot read properties of undefined (reading ‘setState’) 话不多说，代码如下： import React, { Component } from 'react' export default class App extends Component { constructor(props) { super(props); this.state = { route: "hello" } }
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值