==.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. maven替换中央仓库，阿里云镜像下载及自定义本地仓库位置

    maven替换中央仓库- 阿里云 在国内访问Maven仓库,下载速度太慢.下面是将中央仓库替换成阿里云的中央仓库的方法.国内还有其他的公共仓库,自己选择.  在你下载的maven版本-conf-set ...

  2. 设计模式（C#）——03建造者模式

    推荐阅读:  我的CSDN  我的博客园  QQ群:704621321       当一个复杂对象由一些子对象构成,并且子对象的变化会导致复杂对象的修改.这时我们需要提供一种"封装机制&qu ...

  3. Leetcode之深度优先搜索（DFS）专题-559. N叉树的最大深度（Maximum Depth of N-ary Tree）

    Leetcode之深度优先搜索(DFS)专题-559. N叉树的最大深度(Maximum Depth of N-ary Tree) 深度优先搜索的解题详细介绍,点击 给定一个 N 叉树,找到其最大深度 ...

  4. Python处理NetCDF格式数据为TIFF数据(附脚本代码)

    博客小序:NetCDF格式数据广泛应用于科学数据的存储,最近几日自己利用python处理了一些NetCDF数据,特撰此博文以记之. 参考博客: https://www.cnblogs.com/shou ...

  5. JavaScript 数据结构与算法之美 - 桶排序、计数排序、基数排序

    1. 前言 算法为王. 想学好前端,先练好内功,只有内功深厚者,前端之路才会走得更远. 笔者写的 JavaScript 数据结构与算法之美 系列用的语言是 JavaScript ,旨在入门数据结构与算 ...

  6. 如何替换ROS中默认的Planner

    官方文档参阅:http://wiki.ros.org/pluginlib 有时候,可能会需要将替换ROS默认的planner替换成别的planner或我们自己的planner.这就涉及到了新plann ...

  7. 2018宁夏邀请赛K题Vertex Covers（高维前缀和 状压 折半

    https://vjudge.net/problem/Gym-102222K 题意:给定N点M边的无向图,每个点有点权.  点覆盖表示某个点集S{}覆盖了所有的边,其贡献是S中点权之积. 现在让你求所 ...

  8. zoj 3724 树状数组经典

    问题:n个点,对于每个点i,都有一条连向i+1的有向边,另外有m条其他的有向边,有q个询问(u,v)求u到v的最短路   将m条有向边和q个询问对所表示的点对一起排序,(u,v)u大的排前,u一样的v ...

  9. HDU-10240Max Sum Plus Plus+动态规划+滚动数组

    Max Sum Plus Plus 题意:题意理解了老半天,这里是说在给定数列中,取m组子数列,不能有重复,使得这些子序列的和最大: 就比如m=2时候,1 /2/-4/5/6.可以不用拿-4的意思: ...

  10. 染色 Wannafly挑战赛20 A 思维

    链接:https://www.nowcoder.com/acm/contest/133/A来源:牛客网 现在有一棵被Samsara-Karma染了k种颜色的树,每种颜色有着不同的价值 Applese觉 ...