==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
==.self== 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
==.capture== 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
==.once== 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
==.passive== 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

.passive 和 .prevent 不能一起使用:

  • .prevent 将会被忽略

.self 和 .stop 区别:

  • self只响应当前元素自身触发的事件，不会响应经过冒泡触发的事件，并不会阻止冒泡继续向外部触发。
  • stop是从自身开始不向外部发射冒泡信号

觉得有帮助的小伙伴点个赞~

vue中事件修饰符详解(stop, prevent, self, once, capture, passive)的更多相关文章

  1. Vue事件修饰符详解

    整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ...

  2. 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单

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

  3. vue 2.x 的 v-bind 指令的 .prop 事件修饰符详解

    vue 官方文档对 .prop 修饰符的解释是: 使用例子: 那么,具体的原理和用法是什么呢?这要从 html 的 DOM node 说起. 在 html 标签里,我们可以定义各种 attribute ...

  4. 027——VUE中事件修饰符：stop prevent self capture

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

  5. VUE中事件修饰符：stop prevent self capture

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

  6. 028——VUE中事件修饰符once

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

  7. vue中的修饰符

    Vue2.0学习笔记:Vue事件修饰符的使用   事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...

  8. Vue的事件修饰符

    转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...

  9. Java之Static静态修饰符详解

    Java之Static静态修饰符详解 Java之Static静态修饰符详解 一.特点 1.随着类的加载而加载,随着类的消失而消失,生命周期最长 2.优先于对象存在 3.被所有类的对象共享 4.可以直接 ...

随机推荐

  1. Python模块之snmp-cmds,easysnmp

    一.简介 snmp-cmds模块通过SNMP与目标设备进行通信,此模块适用于windows,此模块是基于系统已安装了net-snmp环境easysnmp模块通过SNMP与谬表设备进行通信,此模块用于l ...

  2. Mina各组件介绍

    Mina各组件介绍 上一篇文章已经系统的介绍了Mina的运行流程,Apache推出的Mina性能上很是高效,上章节我们知道内部有很多的类,各个类之间的依赖也是很多,他们之家都是相互依赖. 下面主要看看 ...

  3. Mybatis多表查询之一对一查询的多种实现-XML配置

    Mybatis 中对于多表查询提供了非常强大的实现方式,主要是通过resultMap的结果映射对于多表查询后的返回值进行封装,让我们来看一下官网上对于resultMap的解释:resultMap 元素 ...

  4. java 路径问题

    java路径存在两种写法"/"和"\\" String path="D:\\1.txt"; String path1="D:/1. ...

  5. 操作系统-IO管理疑难点

    IO管理疑难点 一.分配设备 首先根据IO请求中的物理设备名查找系统设备表(SDT),从中找出该设备的DCT(设备控制表),再根据DCT中的设备状态字段,可知该设备是否正忙.若忙,便将请求IO进程的P ...

  6. ASP.NET Core 2.2 : 二十七. JWT与用户授权（细化到Action）

    上一章分享了如何在ASP.NET Core中应用JWT进行用户认证以及Token的刷新,本章继续进行下一步,用户授权.涉及到的例子也以上一章的为基础.(ASP.NET Core 系列目录) 一.概述 ...

  7. 《阿里巴巴Java开发手册1.4.0》阅读总结与心得（四）

    (七)设计规约 1. [强制] 存储方案和底层数据结构的设计获得评审一致通过,并沉淀成为文档. 说明: 有缺陷的底层数据结构容易导致系统风险上升,可扩展性下降,重构成本也会因历史数据迁移和系统平滑过渡 ...

  8. 2017ACM总结

    首先对自己表示强烈的谴责, 这个时间应该是打cf的时间, 没有想到我又秀到了自己, 放弃了CF, 23333, 菜鸡wxk. 高中刚毕业的时候,听大学生们跪求老师不要给挂科,当时想的是,哇上了大学就不 ...

  9. yzoj P2044 数字游戏 题解

    题意 dfs骗了30分,一开始想的距离正解差一点啊,贪心加dp就可以过的水题,真正太蒻了 解析 代码 #include<bits/stdc++.h> using namespace std ...

  10. yzoj2057 x 题解

    题意:给出一个集合,要求把这个集合分成两部分,使得一个集合中的任一元素都与另一个集合的全部元素都两两互质 暴力 枚举每个元素O(n^2)再暴力判gcd=1,如果非1就放入不同集合内,用并查集维护联通块 ...