标签：type 格式 默认 eth cti html UNC 其他 htm
//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
vue学习(六) 事件修饰符 stop prevent capture self once
标签：type 格式 默认 eth cti html UNC 其他 htm
原文地址：https://www.cnblogs.com/xuchao0506/p/10805213.html
