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 ...
随机推荐
- 如何让wordpress后台搜索只匹配搜索文章标题
今天编辑小美眉问网站wordpress后台能不能实现只搜索标题,这个问题怎么可能难到ytkah呢?打开Stack Overflow一顿狂搜,总数有解决方案了,哈哈哈!一起来看看怎么操作吧. 打开主题目 ...
- 用!htrace调试句柄泄漏的一般步骤
Windbg调试器的!htrace扩展对于调试泄漏处理非常方便.该过程基本上可归结为以下简单步骤: 启用跟踪 拍张快照 情景分析 显示差异 在第四步!htrace将在最后一个快照之后显示所有额外打开的 ...
- 有这样一个url=http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段js程序提取url 中的各个get参数(参数名和参数个数不确定),将其按key-value形式返回到一个json结构中, 如{a:'1',b:'2',c:'',d:'xxx',e:undefined}
第一种方法: console.log(getJson(url)); function getJson(url){ var obj={}; var arr=url.split("?" ...
- shell 一些例子
#!/bin/bash #Filename: password.sh by:-V love cmx stty -echo #这里表示 开启隐藏在终端的输出 read -p "Enter y ...
- Solr7.x学习(2)-设置开机启动
1.创建solr用户 useradd solr 2.设置solr-7.7.2目录拥有者 cd /usr/local/ chown -R solr:solr solr-7.7.2 3.在/etc/ini ...
- 解决solr 请求参数过长报错too many boolean clauses Exception
booleanClauses属性的意义 貌似是查询条件有几个逻辑判断而不是参数长度. 如下面两种情况 a:1 OR b:2 AND C:3那么此时booleanClauses=3 id(1 2 3 4 ...
- pandas 获取不符合条件的dataframe
pandas 获取不符合条件的dataframe 或将其过滤掉: df[df["col"].str.contains('this'|'that')==False] >> ...
- Mysql变量、存储过程、函数、流程控制
一.系统变量 系统变量: 全局变量 会话变量 自定义变量: 用户变量 局部变量 说明:变量由系统定义,不是用户定义,属于服务器层面 注意:全局变量需要添加global关键字,会话变量需要添加sessi ...
- Oracle 层次查询 connect by
oracle 层次查询 语法: SELECT ... FROM [WHERE condition] --过 ...
- JavaScript核心知识点
一.JavaScript 简介 一.JavaScript语言的介绍:JavaScript是基于对象和原型的一种动态.弱类型的脚本语言 二.JavaScript语言的组成:JavaScript是由核心语 ...