【Vue笔记】事件修饰符

Vue中事件修饰符：

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .capture 使用事件捕获机制
• .self只有当事件在该元素本身（比如不是在子元素）触发时触发回调
• .once 事件只触发一次

css代码如下：

.outer{
    padding:20px;
    background:blue;
}
.inner{
   width:250px;
    height: 200px;
    background: red;
}

js代码如下：

//创建vm实例，得到viewModel
let vm=new Vue({
    el:'#app',
    data:{

    },
    methods:{
        outerHandler(){
            console.log("这是outer div触发事件");
        },
        innerHandler(){
            console.log("这是inner div触发事件");
        },
        btnHandler(){
            console.log("这是btn 按钮触发事件");
        },
        linkHandler(){
            console.log("这是a 链接触发事件");
        }
    }
})

html代码如下：

使用.stop 阻止冒泡行为

<div id="app">
    <!-- 使用.stop 阻止冒泡行为 -->
      <div class="inner" @click="innerHandler">
          <input type="button" value="click me" @click.stop="btnHandler">
      </div> 
</div>   

使用 .prevent 阻止默认行为

<div id="app">
  <!-- 使用 .prevent 阻止默认行为 -->
  <a href="http://www.baidu.com" @click.prevent="linkHandler">点击一下去百度</a>
</div>  

使用 .capture 实现捕获触发机制

<div id="app">
  <!-- 使用 .capture  实现捕获触发机制 -->
 <div class="inner" @click.capture="innerHandler">
                <input type="button" value="click me" @click.stop="btnHandler">
 </div>  
</div> 

使用 .self 实现只有点击当前元素的时候才会触发事件处理函数

<div id="app">
  <!-- 使用 .self 实现只有点击当前元素的时候才会触发事件处理函数 -->
  <div class="inner" @click.self="innerHandler">
       <input type="button" value="click me" @click.stop="btnHandler">
  </div>
 </div> 

使用 .once 只触发一次事件处理函数

<div id="app">
    <!-- 使用 .once 只触发一次事件处理函数 -->
   <a href="http://www.baidu.com" @click.prevent.once="linkHandler">点击一下去百度</a> 
</div> 

.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为

<div id="app">
      <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为 -->
   <div class="outer" @click="outerHandler">
       <div class="inner" @click.self="innerHandler">
           <input type="button" value="click me" @click="btnHandler">
       </div>
    </div>
</div>