(1).stop // 阻止事件继续传播 即阻止冒泡过程
（2）.prevent //阻止默认事件发生 即event.preventdefault(): 实例： 阻止了a标签的默认刷新
（3）.capture // 添加事件监听器时使用事件捕获模式，即在捕获模式下触
（4）.self //当前元素自身时触发处理函数时才会触发函数，原理：是根据event.target确定是否当前元素本身，来决定是否触发的事件/函数
实例：如果点击内部点击2，冒泡不会执行gett方法，因为event.target指的是内部点击2的dom元素，不是外部点击1的，所以不会触发自己的点击事件
（5）.once //只触发一次

--最好绑定到指定元素

vue 踩坑-事件修饰符的更多相关文章

  1. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  2. vue指令与事件修饰符

    一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...

  3. vue中的事件修饰符

    vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...

  4. 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once

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

  5. Vue指令之事件修饰符

    事件修饰符: + .stop 阻止冒泡 + .prevent 阻止默认事件 + .capture 添加事件侦听器时使用事件捕获模式 + .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 ...

  6. 怎样在 Vue 中使用 事件修饰符 ?

    Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...

  7. vue学习(六) 事件修饰符 stop prevent capture self once

    //html <div id="app"> <div @click="divHandler" style="height:150px ...

  8. （二）咋使用VUE中的事件修饰符

    1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...

  9. 27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解

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

随机推荐

  1. Zabbix 更改监控项的应用级

  2. Zabbix 卸载包 采用yum方式

  3. 1126 Eulerian Path （25 分）

    1126 Eulerian Path (25 分) In graph theory, an Eulerian path is a path in a graph which visits every ...

  4. RabbitMQ入门教程(十)：队列声明queueDeclare（转载）

    原文转载至:https://blog.csdn.net/vbirdbest/article/details/78670550 简介本节主要讨论队列声明的各个参数 queueDeclare(String ...

  5. 安装时提示 INSTALL_PARSE_FAILED_MANIFEST_MALFORMED 解决办法

    INSTALL_PARSE_FAILED_MANIFEST_MALFORMED 安装时出现这个提示. 是由于你工程的AndroidManifest.xml 配置有误,一般来说是activity或Ser ...

  6. Centos7下安装Python3.7.2

    在我的Centos7中,Python默认是安装的,输入python 直接可以查看版本号,入下图 注意:如果本机安装了python2,尽量不要管它,使用python3运行python脚本就好,因为可能有 ...

  7. delphi中Application.MessageBox函数用法详解

    delphi中Application.MessageBox函数用法详解 Application.MessageBox是TApplication的成员函数,声明如下:functionTApplicati ...

  8. Dataset,DataTable

    public DataTable test(int id) { var dt = GetLanguageDataTable(pfAppId); dt.AsEnumerable().ToList().F ...

  9. 干货 | 100+个NLP数据集大放送，再不愁数据！

    奉上100多个按字母顺序排列的开源自然语言处理文本数据集列表(原始未结构化的文本数据),快去按图索骥下载数据自己研究吧! 数据集 Apache软件基金会公开邮件档案:截止到2011年7月11日全部公开 ...

  10. web app 、native app、hybrid app比较

    web app .native app.hybrid app比较 产品新人学习路 关注 2017.06.04 14:52* 字数 1887 阅读 11476评论 1喜欢 15 之前做讨论的时候,提出了 ...