2019.4.18vue.js day3事件修饰符的介绍
@click.stop=“btnClick”;.prevent阻止跳转行为.capture捕获触发事件，冒泡的反序.self点击只触发自己，冒泡，捕获什么都不管.stop和.self的区别：
（1）.stop是用在冒泡的最底层，取消的是所有冒泡事件；
（2）.self是用在你想要取消的某一层的上面，这样其他的冒泡事件不会被取消，只有自己的会被取消。
具体代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .inner{ background: yellow; height: 100px; } </style> <script src="../js/vue.js"></script> </head> <body> <!--1..stop--> <!--<div id="app">--> <!--<div class="inner" @click="innerClick">--> <!--<input type="button" value="点击我试试" class="btn" @click.stop="btnClick">--> <!--</div>--> <!--</div>--> <!--2..prevent阻止跳转事件--> <!--<div id="app">--> <!--<a href="http://www.baidu.com" @click.prevent="aClick">没事多用百度，有事没事都可以找度娘</a>--> <!--</div>--> <!--3. .capture捕获事件--> <!--<div id="app">--> <!--<div class="inner" @click.capture="innerClick">--> <!--<input type="button" value="点击我试试" class="btn" @click="btnClick">--> <!--</div>--> <!--</div>--> <!--3. .self事件--> <div id="app"> <div class="inner" @click.self="innerClick"> <input type="button" value="点击我试试" class="btn" @click="btnClick"> </div> </div> <script> var vm = new Vue({ el: "#app", data: { msg: "", }, methods: { btnClick () { console.log("这是点击的btn"); }, innerClick(){ console.log("这是点击的innerdiv"); }, aClick(){ console.log("这是a标签的点击"); } } }) </script> </body> </html>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061相关知识
最强蜗牛檀香的所有事件一览 最强蜗牛檀香特殊事件介绍
2020魔兽世界情人节宠物介绍 2020年世界事件情人节宠物详情
魔兽回归攻略：10.15事件“时光裂隙”介绍+坐骑小宠物图
Web3.0宠物商店实战教程：ETH智能合约入门到实践
事件
符文工房4特别版夏季有哪些事件 全夏季事件汇总
《征途》宠物情感互动事件奖励？
洛克王国活动事件时间表
MultiThread1
杀戮尖塔全知头骨事件怎么选 全知头骨事件选项结果一览
网址: 2019.4.18vue.js day3事件修饰符的介绍 https://m.mcbbbk.com/newsview458503.html
| 上一篇: 宠物医院能收留流浪猫吗？ |
下一篇: 这个宠物猫引起的消费纠纷最终圆满 |
