【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">
    
      <div class="inner" @click="innerHandler">
          <input type="button" value="click me" @click.stop="btnHandler">
      div> 
div>   

使用 .prevent 阻止默认行为

<div id="app">
  
  <a href="http://www.baidu.com" @click.prevent="linkHandler">点击一下去百度a>
div>  

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

<div id="app">
  
 <div class="inner" @click.capture="innerHandler">
                <input type="button" value="click me" @click.stop="btnHandler">
 div>  
div> 

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

<div id="app">
  
  <div class="inner" @click.self="innerHandler">
       <input type="button" value="click me" @click.stop="btnHandler">
  div>
 div> 

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

<div id="app">
    
   <a href="http://www.baidu.com" @click.prevent.once="linkHandler">点击一下去百度a> 
div> 

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

<div id="app">
      
   <div class="outer" @click="outerHandler">
       <div class="inner" @click.self="innerHandler">
           <input type="button" value="click me" @click="btnHandler">
       div>
    div>
div>