uniapp使用this.$refs.content.addEventListener提示 addEventListener is not a function 错误

最新推荐文章于 2024-04-23 12:28:09 发布
最新推荐文章于 2024-04-23 12:28:09 发布
阅读量1.7k 收藏
点赞数
文章标签： uni-app javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52256715/article/details/131728892
版权

 

这是因为在 Vue 中，$refs 是一个对象，它直接引用组件实例或 DOM 元素，而不是原生的 DOM 元素。要解决这个问题，可以使用 $el 属性来访问原生的 DOM 元素，然后再使用 addEventListener。

将代码修改为：
this.$refs.content.$el.addEventListener('click', this.close)
通过使用 $el 属性，可以访问到 this.$refs.content 的原生 DOM 元素，并且可以正确地使用 addEventListener。
请注意，确保在使用 addEventListener 之后适当地处理事件，例如在适当的时机使用 removeEventListener 来避免内存泄漏。

小周要吃胖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用vue.js在页面内组件监听scroll事件的方法
12-29
window.addEventListener(scroll, function(){ console.log('scrolling'); }); 这是监听不到的！如果你整个网页可以滑动，或许还可以试试！ 对于像我这样，只在页面的内的一个div内要监听的。 实现代码如下： 第一...
uniapp 中使用addEventListener
weixin_35754962的博客
01-03 2655
uniapp 中使用 addEventListener 方法可以给某个元素绑定事件监听。 使用方法： document.getElementById("some-element").addEventListener("click", function() { // do something when the element is clicked }); 注意：在 uniapp 中，需要在页面...
【uni-app】处理uni-app编译APP-PLUS window.addEventListener(‘message‘）不能使用问题
weixin_46027556的博客
02-02 6558
处理uni-app编译APP-PLUS 无法使用监听事件问题window.addEventListener('message'）
uniapp app权限说明弹框2024.5.23更新
最新发布
m0_59203969的博客
04-23 1987
uniapp app申请权限时的说明弹框
uniapp导入echarts自动构建的js后，报错t.addEventListener
weixin_41766754的博客
03-30 2093
uniapp导入echarts自动构建的js后，报错t.addEventListener。将addEventListener删除即可！
uniapp销毁addEventListener事件
weixin_42997826的博客
09-23 6499
** uniapp销毁addEventListener事件 ** 百度了很多vue的方法，结果都不适用，只好自己想办法，也是无关紧要的东西，不影响运行，但是看着心里都烦，有更好的解决方案欢迎指点 上报错信息 这是一个监听滚动的方法，离开了那个页面进入详情页发现这个没有被销毁，一直报这个错，起初我也没管，闲下来看了看，原来是没有监听到destroyed事件的执行，为什么呢，看文档，uniapp的生命...
addEventListener is not a function , JavaScript添加监听事件时报错
weixin_65793170的博客
03-21 5043
在写js代码的时候，控制台有时候会遇到这样的报错，addEventListener is not a function，说addEventListener不是一个函数，具体原因是因为侦听事件的事件源不对，事件源应该是一个元素，而非其它
uniapp监听服务器消息,请问环信的技术人员 移动端mui框架，app后台运行，使用addEventListener监听消息异常...
weixin_34450486的博客
08-04 1359
使用plus.push.addEventListener("receive", function(msg) {接受消息服务器消息 ，app后台运行接收不到消息，没有提示，是因为和你们的服务器断开连接导致的吗还是app登录状态过期导致的呢？然后就是，咱们这个环信服务器是可以通过某种技术直接传递到app上，使app直接接受，不经过服务器后台处理的吗，项目这是前同事写的，很多东西不是很清楚，描述可能不到...
React读书笔记-组件特殊场景下的手动绑定事件1
08-08
使用`this.refs.refBtn.addEventListener('click', function(e) {...})`，我们可以直接在DOM元素上添加事件监听器。在事件处理函数中，通过`e.stopPropagation()`阻止事件冒泡，`e.preventDefault()`阻止按钮的默认...
使用vue构建一个上传图片表单
08-30
this.$refs.file.addEventListener('change', (e) => { var file = e.target.files[0]; var formData = new FormData(); formData.append('file', file); // 上传图片 }); }, methods: { upload() { // ...
完美解决vue 中多个echarts图表自适应的问题
10-15
this.chart = this.$echarts.init(this.$refs.chart); this.setOption(this.option); this.resizeHandler = () => this.chart.resize(); window.addEventListener('resize', this.resizeHandler); }, ...
VUE2实现事件驱动弹窗示例
08-29
instance.$refs.okBtn.addEventListener('click', function() { instance.show = false; resolve(true); }) }) }; const Confirm = (text, okText, cancelText) => { if (instance.show === true) { return;...
uniapp 组件引用 TypeError: this.$refs.xxx is not a function 解决方法（全）
u014538997的博客
08-20 2万+
因为自己的项目中，某些常用模块自己定义了组件，使用时 常出现TypeError: this.$refs.xxx is not a function （即没有xxx这个方法），结合网友和自身遇到的问题，得出三种方法
小程序 uniapp使用echarts报错 t.addEventListener 未定义
夜雨风亭
02-15 3167
修改如下代码:示例为压缩版echarts.min.js 1.增加 var isDomLevel2 = (typeof window !== ‘undefined’) && !!window.addEventListener; 2.修改函数 Le Pe 3.修改函数gx
解决.addEventListener is not function问题
XunLin233的博客
10-23 2300
解决.addEventListener is not a function问题
uniapp关于this.$refs.xxx获取组件出现undefined的解决方法
陆撄宁的博客
08-21 1万+
项目场景： 开发一个产品使用到比较复杂且独立的自定义组件，自定义组件是自定义复选框/单选框 问题描述： 用ref 注册子组件，父组件可以通过this.$refs.xx.fn调用子组件里的函数，但是有时会出现 undefined 未定义的情况。 vue代码 <view class="sg-checkbox"> <helang-checkbox ref="checkbox" @change="onChange"></helang-checkbox> </view&gt
【Vue】Vue的$ref属性为空对象或者为undefined问题及解决办法（涵盖uniapp/H5/微信小程序）
热门推荐
徐海东的博客
07-13 2万+
目录问题：获取this.$refs为空对象或者为undefined原因一：在uniapp中，非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）解决方法：ref在非H5端使用在自定义的组件原因二：使用了版本过低的调试基础库原因三：ref组件使用了条件渲染，即v-if、v-show，这些DOM节点在mounted无法被访问到,详细可以看 深入响应式原理-Vue.js原因四：使用了v-for循环动态绑定ref（大部分时请求后端数据动态渲染DOM），this.$ref[name]获取
uniApp实战学习Day03
m0_57547956的博客
09-02 301
学习目标： uniApp使用小程序SDK调用高德地图定位 uniApp使用生命周期函数监控滚动条实现滚动头部导航栏渐变效果 uniApp自定义头部导航栏对各种机型的适配 尝试使用uniApp引入iconfont使用 尝试使用uniApp封装一个城市选择组件 学习内容： 1.发现window.addEventListener('scroll')监听滚动条事件对小程序无效得使用onPageScroll小程序自带的监听事件 2.发现高德地图webSDK不适用uniApp 得使用高德地图小程序SD.
uni-app开发中 this.$refs 用不了
m0_50015961的博客
01-04 2万+
"this.$refs.xxxx"调用子组件无效的可能原因 1. ref绑定的对象是否正确 <templete> <view ref="child"></view> </templete> <script> export default { onLoad(){ // 会报 "child is undefined" 的问题 console.log(this.$refs.child) } } </script>
window.addEventListener("beforeunload", () =>里面如何操作this.$refs调取方法
05-25
在`window.addEventListener("beforeunload", () => {})`中，`this`指向的是`window`对象，而不是Vue实例对象，因此无法直接调用Vue组件中的`$refs`。如果需要在这里操作Vue组件中的方法，可以将需要调用的方法封装为一个全局方法，然后在`beforeunload`事件回调函数中直接调用该全局方法。示例如下： 首先在Vue实例上定义一个全局方法： ```javascript Vue.prototype.$myMethod = function() { // 调用组件中的方法 this.$refs.myComponent.myMethod(); }; ``` 然后在需要调用的组件上加上`ref`属性： ```html <template> <div ref="myComponent"> <!-- 组件内容 --> </div> </template> ``` 最后在`beforeunload`事件回调函数中调用全局方法： ```javascript window.addEventListener("beforeunload", () => { // 调用全局方法 Vue.prototype.$myMethod(); }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值