==.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. Springboot源码分析之番外篇

    摘要: 大家都知道注解是实现了java.lang.annotation.Annotation接口,眼见为实,耳听为虚,有时候眼见也不一定是真实的. /** * The common interface ...

  2. egret之moveclip 序列帧动画

    废话不多说,直接上代码: private addEffect(name, x: number, y: number, act?: string) { let data = RES.getRes(nam ...

  3. PHP CURL根据详细地址获取腾讯地图经纬度

    <?php $address = "广东省广州市天河区"; $point = getPoint($address); var_dump($point);//输出经纬度 /** ...

  4. Fire Balls 05——子弹的命中及后续效果

    版权申明: 本文原创首发于以下网站: 博客园『优梦创客』的空间:https://www.cnblogs.com/raymondking123 优梦创客的官方博客:https://91make.top ...

  5. 2019牛客暑期多校训练营（第二场） - J - Go on Strike! - 前缀和预处理

    题目链接:https://ac.nowcoder.com/acm/contest/882/C 来自:山东大学FST_stay_night的的题解,加入一些注释帮助理解神仙代码. 好像题解被套了一次又一 ...

  6. HDU4289Control 无向图拆点最大流

    /* ** 无向图拆点,求最大流,最大流即为割点个数. */ #include <iostream> #include <cstdio> #include <cstrin ...

  7. 杭电多校第二场 1005 hack it

    题意: 构造一个n*n 的 01 矩阵, 0 < n < 2001,  矩阵需要满足没有一个子矩阵的4个角都是1,并且矩阵内1的个数至少有85000个. 题解:数论构造题 参考From 代 ...

  8. Codeforces 374 C Inna and Dima (DFS)

    Inna and Dima 题意:从图上的任意一个D点按着DIMADIMA的顺序走,问一共可以经过多少个DIMA,如果经过0个DIMA就输出“Pool DIma!“,如果可以有无数多个DIMA就输出” ...

  9. dp递推 hdu1978

    How many ways Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  10. asp net core mvc 跨域ajax解决方案

    1.配置服务端 在Startup文件中国配置Cors策略: IEnumerable<Client> clients= Configuration.GetSection("Clie ...