vue中的主动触发点击事件

目录
  • 主动触发点击事件
  • 如何自动触发点击事件
    • 模拟点击下载文件、图片

主动触发点击事件

由vue代码触发点击事件，实现的效果是：点击按钮，触发 <input> 输入框点击事件，从而实现选择文件。

示例如下：

<template>
    <input type="file" id="input-upload-file" ref="selectFiles" multiple="multiple">
    <el-button class="operation-button-select" @click="handleButtonSelected">选择文件（可多选）</el-button>
</template>
<script>
 
    export default {
        name: 'HomePage',
        methods: {
            // 按钮点击事件
            handleButtonSelected() {
                // 主动触发点击事件
                this.$refs.selectFiles.dispatchEvent(new MouseEvent('click'));   
            },
        }
    }
</script>

如何自动触发点击事件

   // 两秒后模拟点击
setTimeout(function() {
    // IE
    if(document.all) {
        document.getElementById("desc1").click();
    }
    // 其它浏览器
    else {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById("desc1").dispatchEvent(e);
    }
}, 1000);

desc1为元素的id，额外写上点击这个id会触发的事件。1s后就会执行

模拟点击下载文件、图片

var url = 'http://192.168.10.133/www/xunzhanMob/logo.jpg';
          var a = document.createElement('a');
          console.log(a)
          var event = new MouseEvent('click');
          a.download = '';
          a.href = url;
          a.dispatchEvent(event);

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化. div 指令: // 自动触发点击事件 directives:{ trigger:{ inserted(el,binging){ // console.log("自动触发事件") el.click() } } }, PS:下面看下vue 自动触发点击事件 需要,点击左边的列表出详情,但是都需要点击事件,页面进来时,默认触发点击事件 方法一,vue自定义指令 direc

  • Vue如何实现自动触发功能

    目录 实现自动触发功能 自定义指令实现自动点击事件 1.若是没有v-for循环 2.若是有v-for循环 实现自动触发功能 今天在项目中遇到一个问题,就是当页面加载的时候,我希望某个元素通过点击事件添加样式,试了下jQuery的trigger方法,并没有任何效果,于是只能手动添加,先把功能实现,晚上回来的时候,闲着没事做便温故Vue知识点,正好听到视频中老师在讲解关于自定义指令directives属性,于是便试了下 <button @click='toggle' v-trigger>toggl

  • Vue触发input选取文件点击事件操作

    CSS .upload-btn-box { margin-bottom: 10px; button { margin-right: 10px; } input[type=file] { display: none; } } HTML <div class="upload-btn-box"> <Button @click="choiceImg" icon="ios-cloud-upload-outline" type="

  • Vue手动控制点击事件Click触发方式

    Vue手动控制点击事件Click触发方式

    目录 手动控制点击事件Click触发 方法一 方法二 Vue点击click事件解析 废话不多说,先上代码 手动控制点击事件Click触发 方法一 变量的值&&触发函数 方法二 利用变量控制css样式设置其pointer-event:none Vue点击click事件解析 Vue算是前端技术比较火的一门技术了,所以在日常开发当中掌握它还是比较重要的,最近要用vue做一个移动端项目,趁着空闲的时间来简单的写一下demo,希望能够帮到大家: 废话不多说,先上代码 <!DOCTYPE htm

  • vue中的主动触发点击事件

    目录 主动触发点击事件 如何自动触发点击事件 模拟点击下载文件.图片 主动触发点击事件 由vue代码触发点击事件,实现的效果是:点击按钮,触发 <input> 输入框点击事件,从而实现选择文件. 示例如下: <template>     <input type="file" id="input-upload-file" ref="selectFiles" multiple="multiple"&g

  • VUE解决 v-html不能触发点击事件的问题

    背景:后端返前端html格式的数据,前端用v-html解析渲染,如:<a @click="show(1)"></a>,a标签能成功渲染,但其绑定的事件无法触发. 原因:vue没有将其作为vue的模板解析渲染 解决方案:不用v-html而是component模板编译 上干货: <template> <div class="hello"> <h1> 我是父组件 </h1> <div class

  • vue中div禁止点击事件的实现

    vue中div禁止点击事件的实现

    目录 div禁止点击事件 div作为按钮不可点击问题的处理 div禁止点击事件 在props里面定义一个判断是不是只读的属性. 在最外面的div里面添加三元表达式 pointer-events: none;是禁止鼠标点击事件 div作为按钮不可点击问题的处理 vue中div作为按钮,使用:disabled="flag"(flag为布尔类型)控制按钮是否可点击,发现无论flag为true还是false,div按钮都可点击. 解决方法,将div换成button. 以上为个人经验,希望能给大

  • JS检测页面中哪个HTML标签触发点击事件的方法

    本文实例讲述了JS检测页面中哪个HTML标签触发点击事件的方法.分享给大家供大家参考,具体如下: 在html标签中,为了页面显示的美观,会在标签中相互嵌套,在做"效果"的时候就难免不了的添加各种事件,例如: <a href=""><span onclick="">dddd</span></a> 当用户点击的时候,想确定是链接产生的事件还是span标签onclick标签产生的事件,这个有时候是很有必要

  • ASP.NET中RadioButtonList绑定后台数据后触发点击事件

    本文实例为大家分享了RadioButtonList绑定后台数据,触发点击事件的方法 首先前台页面放置一个RadioButtonList 控件 <asp:RadioButtonList runat="server" ID="RadioButtonList1" BorderStyle="None" RepeatColumns="3" CssClass="" RepeatLayout="Flow&

  • JavaScript的for循环中嵌套一个点击事件的问题解决

    先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击Id为"ul"的元素时,会出现弹出10个10.为什么会弹出10个10呢? 首先,这段代码中的点击事件不是绑定事件,是jQuery的绑定事件,那么绑定事件和普通事件是有区别的.普通事件中,如果对某一个元素添加多个点击事件,那么,最后一个将会把前面的所有点击事件全部覆盖,只能执行最后一个点击事件

  • 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: <ul id="demo"> <li class

  • 对vue中v-on绑定自定事件的实例讲解

    关于官网vue中v-on绑定自定义事件的个人理解 对官网实例进行了一些修改,如下图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on绑定自定义事件</title> <script src="vue.js"></script> </head>

  • Vue表单提交点击事件只允许点击一次的实例

    常用出现场景:商城点击订单提交 1.使用Vue封装事件 body: <template> <div> <el-button @click.once="submitOrder()">提交订单</el-button> </div> </template> 方法: methods: { submitOrder() { // 处理逻辑 } } 2.使用原生JS事件 在数据data里面声明一个flag属性 data() {

随机推荐