Vue笔记 - 事件的修饰符

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .capture 添加事件侦听器事使用事件捕获模式
• .self 只当事件在该元素本身触发时触发回调
• .once 事件只触发一次

1.使用.stop修饰符阻止冒泡

  <div class="inner" style="background-color: aquamarine" @click="divHandler">
     <!-- 使用 .stop 阻止冒泡 -->
     <input type="button" value="戳我" @click.stop="btnHandler">
  </div>

<script>
  divHandler:function () {
     console.log('这里触发了inner div 的点击事件');
 },
  btnHandler:function(){
     console.log('这里触发了 btn 按钮 的点击事件');
},
</script>

2.使用.prevent修饰符阻止默认行为

 <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

<script>
    //ES6语法
    linkClick(){
        console.log('这里触发了链接的点击事件')
   },
</script>

3.使用.capture修饰符实现捕获触发事件的机制
（即：即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理）

 <div class="inner" style="background-color: aquamarine" @click.capture="divHandler">
    <input type="button" value="戳我" @click="btnHandler">
</div>

<script>
  divHandler:function () {
     console.log('这里触发了inner div 的点击事件');
 },
  btnHandler:function(){
     console.log('这里触发了 btn 按钮 的点击事件');
},
</script>

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

 <div class="inner" @click.self="divHandler">
   <input type="button" value="戳我" @click="btnHandler">
 </div>

 <script>
  divHandler:function () {
     console.log('这里触发了inner div 的点击事件');
 },
  btnHandler:function(){
     console.log('这里触发了 btn 按钮 的点击事件');
},
</script>

5.使用.once修饰符只触发一次事件处理函数

//修饰符可以串联
 <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>

.stop和.self的区别

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

 <div class="outer" @click="divHandler2">
    <div class="inner" @click="divHandler">
       <!-- 使用 .stop 阻止冒泡 -->
       <input type="button" value="戳我" @click.stop="btnHandler">
    </div>
 </div>

 <div class="outer" @click="divHandler2">
   <div class="inner" @click.self="divHandler">
     <!-- 使用 .stop 阻止冒泡 -->
      <input type="button" value="戳我" @click="btnHandler">
  </div>
 </div>

<script>
     divHandler:function () {
        console.log('这里触发了inner div 的点击事件');
      },
     btnHandler:function(){
        console.log('这里触发了 btn 按钮 的点击事件')
      },
    divHandler2:function () {
       console.log('这里触发了outer div 的点击事件');
       },
</script>