vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
==.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)的更多相关文章
- Vue事件修饰符详解
整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ...
- 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 2.x 的 v-bind 指令的 .prop 事件修饰符详解
vue 官方文档对 .prop 修饰符的解释是: 使用例子: 那么,具体的原理和用法是什么呢?这要从 html 的 DOM node 说起. 在 html 标签里,我们可以定义各种 attribute ...
- 027——VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 028——VUE中事件修饰符once
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中的修饰符
Vue2.0学习笔记:Vue事件修饰符的使用 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...
- Vue的事件修饰符
转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...
- Java之Static静态修饰符详解
Java之Static静态修饰符详解 Java之Static静态修饰符详解 一.特点 1.随着类的加载而加载,随着类的消失而消失,生命周期最长 2.优先于对象存在 3.被所有类的对象共享 4.可以直接 ...
随机推荐
- sql server 日期近一年，同比
--近一年 ), , , ) SELECT CONVERT(VARCHAR, DATEADD(day, -DAY(GETDATE()), , ) --同比 ), , , ) SELECT CONVER ...
- linux环境部署，docker如何安装redis
安装步骤 1. 安装Redis 通过docker search redis和docker pull redis下载redis镜像 2. 新建挂载配置文件夹 新建data和conf两个文件夹,位置随意. ...
- 【持续集成】GitLab CI + Docker 实现持续集成
GitLab CI + Docker 实现持续集成 一.持续集成(Continuous Integration, CI)的基本概念 概述 在传统软件的开发中,代码的集成工作通常是在所有人都将工作完成后 ...
- OCP培训 MySQL OCP认证实战培训【低价送OCP考证名额】
一.OCP培训 MySQL 5.7 OCP认证全套实战培训[低价送OCP考试名额] 课程目标: 风哥为满足想参加MySQL OCP考证的学员,而设计的一套比较全面OCP实战培训课程. 课程涉及MySQ ...
- Suring开发集成部署时问题记录
前言 开发时一定要用管理员模式打开VS或者VSCODE进行开发,同时不要在nuget上直接下载,要去github上下载源代码调试.第一方便调试,第二Surging迭代较快,nuget版本往往不是最新的 ...
- SQL奇技淫巧（01）：给查出的数据排序编个号【row_number() over(order by c)】（mysql,db2,oracle,sqlserver通用）
我们天天都在跟数据库打交道,写下的代码不计其数,写下的SQL更是可以绕地球几圈.这里收集关于SQL的神奇语法及用法,虽然你可能没有用过,但这些SQL却可以在关键的时候,派上用场. 我对SQL语句的理解 ...
- Python 基础1 - 位运算符
引言 本文主要介绍位运算符,实际上Python有以下7类运算符: [赋值运算符].[比较运算符].[算术运算符].[逻辑运算符].[身份运算符].[成员运算符].[位运算符] 位运算符 按位运算符是把 ...
- 关于简单递归在python3中的实现
话不多说,奉上代码: #倒计时 def count_down(i): if i <= 0: return else: print(str(i)) count_down(i - 1) #求阶乘 d ...
- mysql where、group by、having
今天重新温习一遍mysql的知识 先来讲讲where.group by.having group by :是将记录中的数据,按照条件进行分组: having:是将分组后的数据加上条件筛选,区别于whe ...
- mybatis 源码分析（七）KeyGenerator 详解
一.KeyGenerator 概述 在平时开发的时候经常会有这样的需求,插入数据返回主键,或者插入数据之前需要获取主键,这样的需求在 mybatis 中也是支持的,其中主要的逻辑部分就在 KeyGen ...