Vue如何模拟button的默认submit提交事件【务必注意，模拟事件必须阻止原生事件，否则可能达不到你要的效果】

傷城~ 2021-08-28 15:24 209阅读 0赞

参考 Vue官方文档：[https://cn.vuejs.org/v2/api/?\#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95-%E4%BA%8B%E4%BB%B6][https_cn.vuejs.org_v2_api_E5_AE_9E_E4_BE_8B_E6_96_B9_E6_B3_95-_E4_BA_8B_E4_BB_B6]

// 直接在form标签上增加两个事件
    
    <form name="login" class="form login"
                          @submit.prevent
                          @keyup.enter="!isLoginPending && !disableButton ? login($event) : false">
    </form/

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1][]

[https_cn.vuejs.org_v2_api_E5_AE_9E_E4_BE_8B_E6_96_B9_E6_B3_95-_E4_BA_8B_E4_BB_B6]: https://cn.vuejs.org/v2/api/?#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95-%E4%BA%8B%E4%BB%B6
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210813/0c1c7ff2d4e4425781bdcba337ade735.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1]: /images/20210813/6df41c1706064b138515866113db73a8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关 button的默认事件

天遇到一个平时没遇到的问题，在编写添加列表add()方法时总是闪一下就没了，连console.log()都显示不了，后来发现是button的问题 **原因是在form...

爱被打了一巴掌/ 2024年04月18日 23:51/ 0 赞/ 106 阅读

相关 vue事件修饰符：通过@click.prevent 阻止事件的默认行为

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

- 日理万妓/ 2023年10月01日 09:33/ 0 赞/ 48 阅读

相关事件捕捉，事件冒泡，事件代理，阻止事件冒泡，阻止默认事件

文章目录 1. 事件冒泡与事件捕获事件冒泡事件捕获 2. DOM2事件模型 3. a

柔光的暖阳◎/ 2022年09月02日 11:55/ 0 赞/ 301 阅读

相关事件流阻止元素默认事件

当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定顺序响应该元素的触发事件，事件传播的顺序叫做事件流程。事件流的分类： 1.冒泡型事件流（所有浏览器都支持）

浅浅的花香味﹌/ 2022年05月17日 13:42/ 0 赞/ 314 阅读

相关详解javascript如何阻止冒泡事件及阻止默认事件

一、事件冒泡二、默认行为在说事件冒泡之前，我们先说说事件对象（Event） Event 1、在触发DOM上某个事件时，会产生一

雨点打透心脏的1/2处/ 2022年05月12日 01:48/ 0 赞/ 398 阅读

相关 JavaScript"模拟事件"的注意要点

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

约定不等于承诺〃/ 2022年02月17日 14:37/ 0 赞/ 223 阅读

相关 JavaScript"模拟事件"的注意要点

DOM中的事件模拟三个步骤：首先通过document.createEvent()方法创建event对象，接收一个参数，即表示要创建的事件类型的字符串： UIEvents

末蓝、/ 2022年02月16日 10:49/ 0 赞/ 221 阅读

相关 Vue如何模拟button的默认submit提交事件【务必注意，模拟事件必须阻止原生事件，否则可能达不到你要的效果】

参考 Vue官方文档：[https://cn.vuejs.org/v2/api/?\%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95-%E4%BA%8B

傷城~/ 2021年08月28日 15:24/ 0 赞/ 210 阅读

相关 jQuery--事件对象event详解、阻止默认事件、阻止事件冒泡

事件对象由于标准DOM和IE-DOM所提供的事件对象的方法有所不同，导致使用JavaScript在不同的浏览器中获取事件对象比较繁琐。jQuery针对该问题进行了必要的

秒速五厘米/ 2021年08月14日 01:54/ 0 赞/ 683 阅读

相关如何阻止表单的默认提交事件

当使用bootstrap框架开发前端界面时，有的时候我们做一个table表头的查询框，需要引入一大堆div和from，否则界面的样式就比较丑。如下： <div cla

柔情只为你懂/ 2021年05月12日 11:50/ 0 赞/ 650 阅读