Vue事件修饰符,.capture关键字详解
.prevent 用于阻止默认事件,点击a标签href可以打开相应的链接,那么给事件加
    上此关键字,click.prevent
.capture 冒泡顺序
    例如 div1中嵌套div2中嵌套div3
<div id="app" v-on:click="show">
1
<div id="app2" v-on:click.capture="show2">
2
<div id="app3" v-on:click="show3">
3 </div>
</div>
</div> <script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{ },
methods:{
show:function(){
console.log("这是app的方法")
},
show2:function(){
console.log("这是app2的方法")
},
show3:function(){
console.log("这是app3的方法")
}
}
})
</script>
此处的代码因为div2有capture关键字,所以此时冒泡的顺序发生了改变
    正常情况下:
        点击div3一层一层冒泡,先div3=》div2=》div1
    使用了关键字:
        点击div3时,先div2=》div3=》div1
        1.先冒泡外层带有关键字的事件
        2.外层执行结束之后,往里层执行事件
        3.最后按照从里向外的事件开始执行
        就是说只要存在一个capture关键字,就会影响整个嵌套的执行
        例子
            div1中嵌套div2中嵌套div3.capture中嵌套div4
                此时点击div1
                先执行带有capture的div3
                然后执行div4
                最后按照从里向外的顺序执行
                顺序就是   div3=》div4=》div2=》div1
      其他疑惑
            此时嵌套为
            div1中嵌套div2.capture中嵌套div3中嵌套div4
            那么可以想一下点击最里层的div4会怎么触发呢
            
            1.触发带有关键字的 div2
            2.触发点击的div4
            3.最后从里向外执行 
            那么顺序为   div2=》div4=》div3=》div1
Vue事件修饰符,.capture关键字详解的更多相关文章
- Vue—事件修饰符
		Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ... 
- vue事件修饰符(once:prev:stop)
		vue事件修饰符(once:prev:stop) stop修饰符 效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ... 
- Vue事件修饰符详解
		整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ... 
- Vue2.0学习笔记:Vue事件修饰符的使用
		事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ... 
- vue事件修饰符与按钮修饰符
		事件修饰符:(当事件无需传参数时可直接写成以下形式,有参数时则为@click.stop="handleLiClick($event)") stop:阻止事件冒泡行为(子元素被点击, ... 
- vue事件修饰符
		阻止单击事件冒泡 <a v-on:click.stop="doThis"></a>提交事件不再重载页面<form v-on:submit.preven ... 
- vue 事件修饰符(阻止默认行为和事件冒泡)
		1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ... 
- C#中const 和 readonly 修饰符的用法详解
		1.const是不变常量,在编译的时候就需要有确定的值,只能用于数值和字符串,或者引用类型只能为null.(这里为什么要把字符串单独拿出来?是因为字符串string是引用类型,但是使用的时候却感觉是值 ... 
- 对官网vue事件修饰符串联的顺序如何理解?
		官网有一个提醒:使用修饰符时,顺序很重要:相应的代码会以同样的顺序产生.因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent ... 
随机推荐
- IE zoom:1
			overflow:hidden zoom:1 一起出现克服IE6 bug display:inline-block display:inline zoom:1 一起出现克服IE6bug 
- 12-赵志勇机器学习-Label_Propagation
			(草稿) 过程: 1. 初始化所有节点的 labels 成唯一的值: 2. 对每个节点,将 label 更新为和其相连的所有节点中,标签最多的 节点的label: 2. 初始化情况下,假如所有相连的节 ... 
- 从零和使用mxnet实现线性回归
			1.线性回归从零实现 from mxnet import ndarray as nd import matplotlib.pyplot as plt import numpy as np import ... 
- css规范思维导图(仅限于自己)
- js中a + 1 < a等于true,(a ==1 && a== 2 && a==3) 等于 true如何实现
			先说a + 1 < a const a = { i: 1, valueOf: () => { if (a.i === 1) { return a.i++; } return a.i+2; ... 
- DOM操作 三大家族
			clientHeight 获取对象的高度,不计算任何边距.边框.滚动条,但包括该对象的补白. clientLeft 获取 offsetLeft 属性和客户区域的实际左 ... 
- C# IE浏览器操作类
			using System; using System.Collections.Generic; using System.Drawing; using System.Runtime.InteropSe ... 
- 【c# 学习笔记】c#委托是什么
			法庭上律师为当事人辩护,他真正执行的是当事人的陈词,律师就相当于一个委托对象,而当事人则委托律师对象为自己辩护. c#中的委托概念也就好比律师对象,它是一个类(“委托是类类型”这个事实将在“委托本质” ... 
- kali渗透
			局域网-断网&劫持(kali) 1.查看局域网中的主机 fping –asg 192.168.1.0/24 2.断网 arpspoof -i wlan0 -t 192.168.100 19 ... 
- [POC]微软3389远程漏洞CVE-2019-0708批量检测工具
			0x001 Win下检测 https://github.com/robertdavidgraham/rdpscan C:\Users\K8team\Desktop\rdpscan-master\vs1 ... 
