this.$refs.filElem.dispatchEvent()兼容问题

IE下点击事件兼容性解决方案
最新推荐文章于 2023-09-30 13:34:46 发布
原创 最新推荐文章于 2023-09-30 13:34:46 发布 · 1.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文介绍了一种在Internet Explorer浏览器中解决点击事件兼容性问题的方法。通过使用原生的click方法代替dispatchEvent，避免了在IE浏览器下可能出现的问题。

 IE浏览器下会出现问题：

this.$refs.filImg.dispatchEvent(new MouseEvent('click'))

我采用的解决方式：

直接使用如下方式替换

this.$refs.filElem.click()

 

踩坑——使用了dispatchTouchEvent后控件点击无效问题
是阿超
12-04 1065
踩坑——使用了dispatchTouchEvent后控件点击无效问题
v-for与ref配合使用，this.$refs.key返回的是组件数组
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-04 986
希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。返回的将是一个数组，而不是单一的DOM元素或组件实例。指令是Vue中最常用的循环渲染方式之一，它可以用来遍历数组、对象等数据结构，并为每一个数据项渲染对应的DOM元素。时，才会渲染对应的元素。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，在Vue.js开发中，我们经常需要遍历一组数据并渲染出对应的DOM元素。，我们可以获取到这三个组件的引用，并对其进行操作。
触发元素事件，模拟点击dispatchEvent
weixin_33775582的博客
11-07 1319
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue框架Element的事件传递broadcast和dispatch方法分析
weixin_30611509的博客
02-09 229
前言 最近在学习饿了么的Vue前端框架Element，发现其源码中大量使用了broadcast和dispatch方法，而Element使用的是Vue2.0版本，众所周知在Vue 1.0升级到2.0中去除了$broadcast和$dispatch方法。 所以在Element框架源码中将这两个函数重写实现了一遍，并采用的是minix的方式植入每个组件的代码中。 但是Element的这两个函数虽然与官方...
一个元素点击触发另一个元素的点击可以用到dispatchEvent
qq_43351249的博客
08-12 639
图片点击触发input的点击,原因是点击图片的时候需要选择文件 <img src="../assets/img/btn_video@2x.png" alt="" @click="uploadMaterial(2)" v-if="showFiles !== 2 && navCenterText !== '回复'" /> &l
vue3中$refs使用
wgq2020的博客
09-30 3104
注意，ref方法返回的是一个带有value属性的对象，而不是直接返回原始值。因此，在访问DOM元素引用时需要使用value属性。
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
4. **获取样式的问题**：需要注意的是，直接通过`this.$refs.name.style`获取CSS样式可能无效，因为这通常适用于原生DOM元素。对于组件，可能需要使用其他方法（如`offsetHeight`、`clientWidth`等）来获取尺寸信息...
vue列表单项展开收缩功能之this.$refs的详解
10-17
在Vue.js中，`this.$refs` 是一个用于获取组件实例引用的重要特性，它允许开发者直接访问DOM元素或自定义组件实例。在这个场景中，`this.$refs` 被用来实现列表单项的展开和收缩功能。下面我们将深入探讨如何使用`...
this.$toast() 了解一下？
12-03
【标题】: "Vue.js中的`this.$toast()`方法解析" 【描述】: 在前端开发中，经常需要处理各种提示信息，例如浮层提示。传统的做法是为每个页面单独引入和控制这些组件，但这并不高效。`this.$toast()`提供了一种更...
Vue使用input（type=file）上传文件
热门推荐
qq_41154522的博客
02-02 1万+
<a-icon type="plus-square" @click="uploadMaterial()" /> <input type="file" style="display:none" ref="file" @click="e => {e.target.value = '';} " @change="getFileData" /> 触发方法 @click="e => {e.target.value = ‘’;} " 设置这个方法是为了防止上传两次相同的文件，
this.$refs.files.upload()怎么选择上传到哪里
weixin_35755640的博客
02-12 530
这取决于你在你的代码中指定的服务器端地址。通常情况下，上传文件的目的地是在服务器端代码中配置的。你需要在服务器端指定文件上传的目标 URL，然后在客户端代码中，使用这个 URL 调用 this.$refs.files.upload() 方法来上传文件。 ...
this.$refs使用方法
a_靖的博客
08-21 1万+
深入理解和使用this.$refs——Vue.js的利器
Vue主动触发点击事件
rocklee的专栏
11-04 1308
备忘一下，百度的都是扯蛋，还得靠自己。
记录一次uniapp中实现选择上传其他文件
Codernmx
10-24 1152
相关插件： https://ext.dcloud.net.cn/plugin?id=4109 https://ext.dcloud.net.cn/plugin?id=1015从插件市场导入可以直接使用，下载插件的话引入一下组件，注册一下 选择文件写个方法调组件内部的方法就行。
JS動態加的touchend事件用dispatchEvent執行事件不生效
losedguest的博客
06-06 1573
動態添加的標籤使用 $(document).on註冊事件當想要touchend事件時,發現觸發器dispatchEvent無法觸發touchend事件$("#Test").click()卻執行了 $(document).on('touchend' var event = document.createEvent('HTMLEvents');event.initEvent('touchend', t...
dispatchEvent发送事件
weixin_34082695的博客
03-11 505
能够有意识的发送事件，就是dispatchEvent。 //创建Sprite实例 var evtSpr:Sprite = new Sprite(); //事件注册 evtSpr.addEventListener(Event.COMPLETE, compHandler); evtSpr.addEventListener(MouseEvent.CLICK, clickHandl...
使用dispatchEvent派发自定义事件
个人前端记录
06-25 8962
这里暂不介绍对低版本IE的兼容。。。 标准浏览器中使用dispatchEvent派发自定义事件：element.dispatchEvent()，除此之外，还有创建和初始化事件： 一般的流程是：创建 &amp;gt;&amp;gt; 初始化 &amp;gt;&amp;gt; 派发。 对应的事件流程：document.createEvent() &amp;gt;&amp;gt; event.initEvent() &amp;gt;&amp;g
NET CORE Vue 导入EXCEL
weixin_58852027的博客
12-03 559
using NPOI.SS.UserModel; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.IO; using System.Reflection; /// <summary> /// 读取Excel多Sheet数据 /// </su.
this.$refs和this.$ref
最新发布
12-11
`this.$refs` 是Vue中用于动态绑定到DOM元素或自定义组件实例的一个特殊属性。它允许你在JavaScript中直接操作已经渲染到DOM上的元素或子组件。 - **ref属性**：在模板中使用`ref`属性为特定元素或组件命名，如`...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值