Vue学习笔记【6】——事件修饰符
.stop 阻止冒泡(阻止事件向外层冒泡)
.prevent 阻止默认事件(链接跳转、表单提交)
.capture 添加事件侦听器时使用事件捕获模式(从外到里触发事件)
.self 只当事件在该元素本身(比如不是子元素)触发时触发回调
.once 事件只触发一次
注意:
1.once和prevent的先后顺序不会影响结果
2.self和stop的区别
四个div从内层到外层分别为:div1~div4,各绑定一个点击事件
当点击div2时,会发生事件冒泡,依次触发了div2、div3、div4
stop阻止了(使用该修饰符的元素引发的)所有的冒泡行为。但不能阻止其内层元素冒泡造成的其事件触发。
例子:为div2添加stop修饰符,当点击div2时,不再产生div2引起的事件冒泡行为,只触发了div2;当点击div1时,div1会引发事件冒泡,导致div2的事件触发,但是不再继续冒泡,最终触发了div1和div2。
self是阻止(冒泡到使用该修饰符的元素的本身的)冒泡行为。只有点击这个元素本身才会触发这个元素绑定的事件,然后继续向上冒泡。它内部元素的冒泡不会使它绑定的事件触发,但会继续往外冒泡。
例子:为div2添加self修饰符,当点击div2时,触发了div2、div3、div4;当点击其内部的div1时,触发了div1,viv3,div4。
Vue学习笔记【6】——事件修饰符的更多相关文章
- 学习Vue第三节,事件修饰符stop、prevent、capture、self、once
事件修饰符: .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 .once 事 ...
- vue学习笔记(四)事件处理器
前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...
- Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @click ...
- 0025 Java学习笔记-面向对象-final修饰符、不可变类
final关键字可以用于何处 修饰类:该类不可被继承 修饰变量:该变量一经初始化就不能被重新赋值,即使该值跟初始化的值相同或者指向同一个对象,也不可以 类变量: 实例变量: 形参: 注意可以修饰形参 ...
- HTML学习笔记5:修饰符和特殊标签
①修饰符: 作用:修饰显示的方式,并不改变网页的结构,需要修饰的内容写在修饰标签内 常用文字和段落修饰符: 文字斜体:<i></i> 或 <em> ...
- SAS学习笔记33 格式修饰符
冒号(:)格式修饰符 从非空格开始读取变量所对应的数据,直到满足以下任何一种情况 遇到下一个空格列 对应变量所定义的长度已经读满 数据行结束 &格式修饰符 修饰所读取为字符型的列数据中含有一个 ...
- 吴裕雄--天生自然C++语言学习笔记:C++ 修饰符类型
C++ 允许在 char.int 和 double 数据类型前放置修饰符.修饰符用于改变基本类型的含义,所以它更能满足各种情境的需求. 下面列出了数据类型修饰符: signed unsigned lo ...
- 第二章 Vue快速入门--12 事件修饰符的介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue.js-03:第三章 - 事件修饰符的使用
一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...
- Vue事件修饰符详解
整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ...
随机推荐
- FastDFSClient上传图片工具类
package cn.lijun.core.util; import org.apache.commons.io.FilenameUtils;import org.csource.common.Nam ...
- POJ 2299 Ultra-QuickSort (树状数组+离散化 求逆序数)
In this problem, you have to analyze a particular sorting algorithm. The algorithm processes a seque ...
- cf round#598 CDEF
C:模拟:未跳到目的地之前先贪心放板子,能到达目的地后紧贴着放板子 先判能不能跳到目的地,能跳到再考虑是否需要将后面的板子往前移动 #include<bits/stdc++.h> usin ...
- mysql性能查看 命中率 慢查询
网上有很多的文章教怎么配置MySQL服务器,但考虑到服务器硬件配置的不同,具体应用的差别,那些文章的做法只能作为初步设置参考,我们需要根据自己的情况进行配置优化,好的做法是MySQL服务器稳定运行了一 ...
- C#排列组合类,写彩票算法的朋友们可以来看一看
public class PermutationAndCombination<T> { /// <summary> /// 交换两个变量 ...
- oracle 中和mysql的group_concat有同样作用的写法
所有版本的oracle都可以使用select wm_concat(name) as name from user;但如果是oracle11g,使用select listagg(name, ',') w ...
- Python错误 importModuleNotFoundError: No module named 'Crypto'
0x00经过 今天在python中导入模块的用 from Crypto.Cipher import AES 的时候出现了找不到模块的错误. 百度了很长时间有很多解决方法,但是因不同的环境不同的 ...
- Find a Way (双bfs)
Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. Leave Ningbo one year ...
- 5.如何使用jmeter参数话
参数化:简单的来理解一下,我们录制了一个脚本,这个脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者更好的模拟多个用户来登录系统.这个时候就需要对用户名和密码进行参 ...
- AWS使用教程
AWS使用教程 一.注册登录(https://portal.aws.amazon.com/billing/signup) 准备资料:信用卡(visa卡).电子邮箱.手机号 1.填写账号名和密码 2.填 ...