模拟触发一个按钮

原创已于 2022-03-02 17:07:36 修改 · 408 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #vue.js #javascript

收录于

于 2021-08-30 09:43:56 首次发布

这篇博客介绍了如何在Vue.js和JavaScript中模拟触发一个按钮的点击事件。首先，通过给按钮添加ref属性实现Vue.js中的模拟点击，然后详细阐述了原生JavaScript的实现方法。同时，也提及了使用jQuery来触发按钮点击的操作步骤。

vue方式
1:给按钮添加一个ref

<el-button size="small" type="primary" ref="savebtn">导入</el-button>

2:事件触发

this.$refs.savebtn.$el.click()

原生js方式

document.getElementById('demo').click();

jquery方式

 $(".demo").click(function(){
   $(".btn").trigger('click');
 })

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

双手依舞

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3.0+Ts+全局自定义指令实现动态按钮【操作】

weixin_44871749的博客

08-19

2725

本文采用vue3.0+Ts+全局自定义指令实现动态按钮【操作】，应用场景为后端发送动态菜单+操作，操作信息存放在路由的meta中并将路由存在vuex中。模板文件使用全局自定义指令动态判断是否显示该按钮。

Vue3 ref 模拟触发点击事件此次用于模拟点击el upload 的上传

qq_39581137的博客

04-19

8578

由于vue2和vue3的ref使用不一样，经过控制台打印等一系列操作最终寻找到可以利用 triggerRef.value?.$.vnode.el?.click()这句来模拟点击

参与评论您还未登录，请先登录后发表或查看评论

vue3代码触发某个元素点击事件；printButton.value.$el.click()

i_am_a_div的博客

07-22

1986

vue3代码触发某个元素点击事件

Vue3按钮（Button）

Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者

03-10

9242

丰富又好看的各种按钮，用于开始一个即时操作，支持：7 种类型；3 种形状；自定义按钮图标；三种尺寸；ghost 样式；自定义样式；设置链接跳转；禁用；加载中；自定义加载指示符；设置为 block 按钮等等，总之，功能丰富，简单易用😁😁

vue模拟点击事件

奔跑的面条博客

01-31

8790

https://blog.csdn.net/jiandan1127/article/details/103381636

vue模拟触发另一个按钮点击事件

热门推荐

jiandan1127的博客

12-04

2万+

vue.js 1，给另一个按钮添加ref <el-button size="small" type="primary" ref="import">导入</el-button> 2，事件触发 this.$refs.import.$el.click() jQuery $("#a").click(function(){ $("#b").trigger('click')...

在事件触发的时候，有时我们需要一些模拟用户行为的操作。例如：当网页加载完毕后自行点击一个按钮触发一个事件，而不是用户去点击。...

weixin_34354173的博客

10-12

174

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt...

HTML中点击div H或者其它标签模拟触发a标签中的herf，例如点一个超级大的按钮点击那里都跳转

tenggeer0789的博客

04-18

2463

主要方法就是触发函数来执行例如： <h3 @click="zhuomian()">桌面客户端</h3> <div @click="zhuomian()">桌面客户端</div> <script> export default { data() { }, methods: { ...

vue3 如何通过一个方法触发点击事件

Sweet_lemon99的博客

02-29

3842

vue3 模拟触发一个按钮的点击事件

Vue模拟手动点击事件

记录生活点滴

05-12

6093

Vue模拟手动点击事件Vue模拟手动点击事件 Vue模拟手动点击事件最近自己搭个Vue项目玩一玩，发现菜单默认选中点击第一项始终实现不了，更搞笑的是网上找了半天也没找到答案，最后特此记录一下。 Vue代码 mounted () { this.$refs.YourRefName.$el.click() }, ...

【Vue】Vue3/2 模拟触发点击事件

最新发布

null

12-31

491

以上是页面代码在点击ElButton后调用importAction来达到选择文件的目的，选择文件后会触发事件调用beforUpload 和uploadChange来调用api上传文件,由于vue2和vue3的ref使用不一样，经过控制台打印等一系列操作最终寻找到可以利用 triggerRef.value?.click()这句来模拟点击，下面是实现上传功能的部分。模拟点击el upload 的上传。

VUE3按钮点击完成效果

xiaoHelloWord的博客

05-26

681

【代码】VUE3按钮点击完成效果。

vue3组合式写法在方法中出发点击事件

fury的博客

04-11

4915

在上述代码中，首先通过ref创建了一个名为linkRef的引用变量，并将其初始化为null。然后定义了一个名为handleClick的方法，该方法会在调用时通过linkRef.value.$el.click()触发a标签的点击事件。最后从setup函数中返回了linkRef和handleClick这两个选项。在Vue 3的组合式API中，可以通过ref来获取DOM元素的引用，然后使用$el属性访问DOM元素并触发其点击事件。用vue3组合式写法，如何在一个方法中调用a标签的点击事件。

【vue】主动触发点击事件

Withered Wood

10-16

1万+

由vue代码触发点击事件，实现的效果是：点击按钮，触发 <input> 输入框点击事件，从而实现选择文件。示例如下： <template> <input type="file" id="input-upload-file" ref="selectFiles" multiple="multiple"> <el-button class="operation-button-select" @click="handleButtonSelected"&gt

vue3+ts封装一个button组件（多样式动态class优化、加载3秒后可点击）

weixin_43837268的博客

12-17

1876

<template> <button :class="classs" @click="handleClick" > <i v-if="loading" class="z-icon-loading"></i> <i v-if="icon && !loading" :class="icon"></i> <span v-if="$slots.default"><slo.

《Vue3+Ts》手把手教你写一个Button组件

Oliver尹的博客

05-04

4009

本文主要讲述了在Vue3和TypeScript下如何实现一个简单的Button组件，以及当我们要实现这个组件需要在前期进行功能代码的设计，优秀的设计可以在前期将所有功能点都描述清楚......

通用vue编辑按钮和新建按钮事件逻辑

qq_55928824的博客

01-09

1910

通用vue编辑按钮和新建按钮事件逻辑

vue3通过js触发el-button的点击事件

nlhhln的博客

02-02

2604

项目登录页，需要点击登录按钮，实现一些需求，因为回车键也绑定了，想通过js实现触发，虽然问题没解决，但分享下触发方法。

【Vue3+TS】Composition API(一)

前端学习博客

06-22

983

setup是Vue3.0中一个新的配置项，值为一个函数。组件中所用到的：数据、方法等等，均要配置在setup中。setup函数的返回值：若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。尽量不要与Vue2.x配置混用setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）可能第一次使用vue3时会报错，因为使用的插件报错信息提示