vue学习(六) 事件修饰符 stop prevent capture self once

//html
<div id="app">
　　<div @click="divHandler" style="height:150px,background-color:darkcyan">
　　　　<input type="button" value="点击" @click="btnHandler">
　　</div>

　　<a href="http://www.bilibili.com" @click="linkClick">跳转到bilibili</a>

　　<div @click.capture="divClick" style="hight:150px,background-color:grey">
　　　　<input type="button" value="按一下" @click="buttonClick">
　　</div>

　　<a href="http://weibo.com" @click.once="weibo">连接到微博</a>
</div>

//script
<script>
　　var vm = new Vue({
　　　　el:'app',
　　　　data:{
　　　　　　msg:'点击一下'
　　　　},
　　　　methods:{//methods中定义了当前vue实例中所有可用的方法
　　　　　　divHandler:function(){
　　　　　　　console.log('触发了div的点击事件')
　　　　　　},
　　　　　　btnHandler(){
　　　　　　　console.log('触发了btn的点击事件')
　　　　　　},
　　　　　　linkClick(){
　　　　　　  console.log('触发了链接的点击事件')
　　　　　　},
　　　　　　divClick(){
　　　　　　  console.log('触发了div点击事件')
　　　　　　}，
　　　　　　buttonClick(){
　　　　　　  console.log('触发了button点击事件')
　　　　　　}
　　　　}
　　})
</script>

简介：

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件监听器时使用事件捕获方式

.self 只当事件在该元素本身(比如不是子元素)触发时触发回调

.once 事件只触发一次

说明：

点击按钮，控制台会打印 触发了btn的点击事件 触发了div的点击事件 默认是冒泡机制，里边的btn被外边的div包裹着，点击里边的，事件会一层一层往外冒，先调用内层的click在调用外层的click。

如果想阻止冒泡，需要给按钮的click事件加上.stop  格式是  <input type="button" value="点击" @click.stop="btnHandler">,执行的效果就是 只会出发btn的点击事件不会触发外层div的点击事件

当我们点击跳转去bilibili的时候，控制台会打印 触发了链接的点击事件 页面跳转到B站  会跳转。如果我们不想让跳转，可以使用.prevent组织默认事件  格式是  <a href="http://www.bilibili.com" @click.prevent="linkClick"></a>

 

给外层div的click时间加上.capture  点击按钮的作用效果，就和冒泡相反了 先执行外层div的click事件，在执行内层button的click时间，控制台  触发了div点击事件  触发了button点击事件

如果仅仅想通过点击div来触发div的点击事件，需要给div的click加上.self  格式是<div @click.self="divClick"></div>  其他的不管是冒泡还是捕获 通通都不执行div的点击事件 

给click加上once，该点击事件只会被触发一次，不会触发第二次 

事件修饰符是可以串联用的@click.prevent.once

转载于:https://www.cnblogs.com/xuchao0506/p/10805213.html