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