【避坑指“难”】vue 如何通过点击触发另一个点击事件，即模拟点击事件

最新推荐文章于 2024-06-03 17:18:43 发布
最新推荐文章于 2024-06-03 17:18:43 发布
阅读量5.5k 收藏 2
点赞数
分类专栏： Vue 超级避坑指难 Element-ui 文章标签： vue vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42224055/article/details/106518038
版权

在前端中有时候会有这样的需求，通过点击一个按钮触发另一个按钮或者另一个链接的点击事件，在vue中我们通过下面方法解决：

1、给另一个按钮添加ref

 <el-button ref="uploadImgBtn">上传图片</el-button>

2、触发事件

this.$refs.uploadImgBtn[0].$el.click()
椰卤工程师
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用VUE实现点击事件
m0_74294675的博客
03-21 2246
2，切片好的图片保存为web所用格式保存到桌面后进行使用。
一个按钮绑定两个事件
qq_27009517的博客
07-14 1507
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&.
点击按钮却触发了其他按钮的事件
fulong0406的博客
11-13 952
首先交代一下问题背景：按钮1 是type=“image” 点击按钮1的时候触发了按钮2，奇不奇怪？ 解决方案是把input标签换为img标签 因为input标签会触发 按钮2的事件（input标签点击 时 会触发表单提交事件）！！！ 总结：按钮1 单击的时候触发了按钮2，那么可以再创建不同形式的按钮3啊，如果按钮3还会 触发按钮2的事件，那么就是按钮2事件的问题，不拉不拉，...
点击一个按钮同时触发另一个按钮
tianzhen620的博客
06-11 4431
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;title&gt;&lt;/title&gt;        &lt;script type="text/javascript" src="js/jquery-1.
Vue项目：js模拟点击a标签下载文件并重命名，URL文件地址下载方法、请求接口下载文件方法总结。
2401_84152911的博客
05-15 1004
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue3+ts 点击一个按钮执行另一个按钮的默认事件
最新发布
weixin_52517566的博客
06-03 184
先定义一个按钮的方法，在通过ref获取第二个按钮，通过exportBtn.value!拿到第二个按钮的默认事件，注意：一定要通过$el拿到按钮的节点才能执行节点的点击事件。
vue模拟另一个按钮点击事件
太阳晒屁股了的博客
08-13 1万+
前言：在前端中有时候会有这样的需求，通过点击一个按钮触发另一个按钮或者另一个链接的点击事件，在vue中我们通过下面方法解决 1，给另一个按钮添加ref <el-button size="small" type="primary" ref="upload">点击上传附件(≤100M)</el-button> 2，事件触发 this.$refs.upload.$e...
解决Vue监听键盘事件,执行鼠标点击事件后，立即点击键盘。会触发上一次鼠标的点击事件
时光有伱，记忆成花~
06-16 633
给键盘事件触发前增加 e.stopPropagation()，该方法可以停止事件传播，从而确保键盘事件不会影响到鼠标事件的处理过程。Vue监听鼠标和键盘事件，执行鼠标点击事件后，立即点击键盘，触发键盘点击事件，会触发上一次鼠标的点击事件。
实现点击按钮发送请求后返回结果之后才能再次请求
xiyan_yu的博客
09-26 661
实现点击按钮发送请求后返回结果之后才能再次请求
Vue触发input选取文件点击事件操作
10-14
在Vue.js中，触发input元素的选取文件点击事件是一个常见的需求，这通常涉及到用户界面中的文件上传功能。在本文中，我们将深入探讨如何在Vue组件中实现这一操作，并结合示例代码进行详细解释。 首先，我们需要创建...
vue自定义移动端touch事件，点击、滑动、长按事件
09-30
在 Vue 中，我们可以通过监听这两个事件来模拟点击行为。例如： ```html 点击我 export default { methods: { handleTouchStart() { console.log('触摸开始'); }, handleTouchEnd() { console.log('触摸...
vue 点击展开显示更多(点击收起部分隐藏)
10-17
通过这种方式，我们可以实现一个简单的Vue组件，该组件能够根据用户的交互行为动态地显示或隐藏列表中的数据，提高页面的可读性和交互性。在实际开发中，这种功能可以应用于各种列表展示场景，如商品列表、文章列表...
带节点点击事件的DTree
07-26
在DTree中，每个节点都可以视为一个可点击的对象，当用户点击节点时，会触发预设的点击事件处理函数。这种设计使得开发者能够轻松地将各种功能与树形结构的节点关联起来，比如打开新的页面、显示详细信息、执行数据...
使用Vue组件实现一个简单弹窗效果
08-27
使用Vue组件实现一个简单弹窗效果 本文主要介绍了使用Vue组件实现一个简单弹窗效果，涉及到弹窗遮罩的实现、slot插槽的使用方式、props和$emit传参等内容。 弹窗遮罩的实现 弹窗遮罩是实现弹窗效果的关键部分。...
vue3组合式写法在方法中出发点击事件
fury的博客
04-11 3816
在上述代码中，首先通过ref创建了一个名为linkRef的引用变量，并将其初始化为null。然后定义了一个名为handleClick的方法，该方法会在调用时通过linkRef.value.$el.click()触发a标签的点击事件。最后从setup函数中返回了linkRef和handleClick这两个选项。在Vue 3的组合式API中，可以通过ref来获取DOM元素的引用，然后使用$el属性访问DOM元素并触发其点击事件。用vue3组合式写法，如何在一个方法中调用a标签的点击事件。
Vue：父组件触发子组件中的方法
孙悟空
07-19 5536
vue父组件触发子组件中函数的两种方式。
微信小程序知识点梳理
weixin_48787059的博客
10-23 3736
微信小程序知识点梳理 文章目录微信小程序知识点梳理前言一、窗口配置？二、小程序文件类型1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、窗口配置？ 窗口配置其实在微信官方文档的小程序里面有详细的全局配置，最常用的就是路由，底部导航tabbar，导航栏的文本，背景颜色，窗口的背景色等，下面附上图片 在
一个按钮触发两个事件
热门推荐
肖肖肖丽珠的博客
12-31 2万+
点击一个按钮 分别触发两个事件 点击 点击第一次的时候  $("button").click(function(){   $("p").css({"background-color":"red","font-size":"200%"});   }); 在点击第二次的时候  $("button").click(function(){   $("p").css({"displa
用Vue和js实现点击一个div 触发文件上传的功能 代码实现
04-22
非常抱歉，作为AI语言模型，我无法执行代码或提供代码的实现。但是我可以提供一些思路供您参考： 1. 创建一个div元素，通过Vue绑定click事件。 2. 在事件处理程序中，创建一个input元素，类型为file。 3. 将input元素添加到DOM中，并使用JS的click()方法模拟用户点击input元素。 4. 当用户选择文件后，可以通过Vue的数据绑定将文件信息显示在页面上。 以下是示例代码，仅供参考： HTML部分： ``` <template> <div @click="uploadFile">点击上传文件</div> <div v-if="file">{{ file.name }}</div> </template> ``` JS部分： ``` <script> export default { data() { return { file: null } }, methods: { uploadFile() { const input = document.createElement('input') input.type = 'file' input.addEventListener('change', (event) => { this.file = event.target.files[0] }) input.click() } } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

椰卤工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值