Vue指令之事件修饰符

事件修饰符：

+ .stop 阻止冒泡

+ .prevent 阻止默认事件

+ .capture 添加事件侦听器时使用事件捕获模式

+ .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

+ .once 事件只触发一次

 

.stop 阻止冒泡

    <!--stop  阻止冒泡  -->
    <!-- 当点击button事件后，首先执行的是btnHandle事件，在执行divHandler事件 -->
    <div class="box" @click="divHandler">
        <!--<input type="button" value="戳他" @click.stop="btnHandler"> 阻止该事件冒泡 -->
        <input type="button" value="戳他" @click="btnHandler">
    </div>


    <script src="./lib/vue-2.4.0.js"></script>
    <script>
    
        var vm=new Vue({
            el:'.box',
            data:{

            },
            methods:{
                divHandler(){
                    alert('触发了divHandler事件');
                },
                btnHandler(){
                    alert('触发了btnHandler事件');
                }
            }
        });

 

 

.prevent 阻止默认行为

 <!-- .prevent 阻止默认行为 -->
    <!-- 当点击有问题去百度，的时候触发了linkHandler事件，同时也直接去百度了 -->
    <!-- <a href="http://www.baidu.com" @click.prevent='linkHandler'>有问题去百度！</a> 阻止去打开百度行为 -->
    <div class="box" @click="divHandler">
        <input type="button" value="戳他" @click="btnHandler">
        <a href="http://www.baidu.com" @click.prevent='linkHandler'>有问题去百度！</a>
    </div> 
    
    <script src="./lib/vue-2.4.0.js" ></script>
    <script>
    
        var vm=new Vue({
            el:'.box',
            data:{

            },
            methods:{
                divHandler(){
                    alert('触发了divHandler事件');
                },
                btnHandler(){
                    alert('触发了btnHandler事件');
                },
                linkHandler(){
                    alert("触发了linkHandler事件");
                }

            }
        });

 

.capture 实现捕获触发事件的机制

　　

 <!-- .capture 实现捕获触发事件机制 -->
    <!-- 当点击btn按钮会触发btnHandler事件，在触发divHandler事件，利用capture实现从外到内的事件 -->
    <!-- <div class="box" @click.capture="divHandler"> 实现先divHandler在btnHandler -->
         <div class="box" @click.capture="divHandler">

        <input type="button" value="戳他" @click="btnHandler">
        <a href="http://www.baidu.com" @click='linkHandler'>有问题去百度！</a>
    </div> 
    
    <script src="./lib/vue-2.4.0.js" ></script>
    <script>
    
        var vm=new Vue({
            el:'.box',
            data:{

            },
            methods:{
                divHandler(){
                    alert('触发了divHandler事件');
                },
                btnHandler(){
                    alert('触发了btnHandler事件');
                },
                linkHandler(){
                    alert("触发了linkHandler事件");
                }

            }
        });
    </script>

 

 

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

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

　　

<div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div> 

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        div1Handler() {
          console.log('这是触发了 inner div 的点击事件')
        },
        btnHandler() {
          console.log('这是触发了 btn 按钮 的点击事件')
        },
        linkClick() {
          console.log('触发了连接的点击事件')
        },
        div2Handler() {
          console.log('这是触发了 outer div 的点击事件')
        }
      }
    });
  </script>

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

　　

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


<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        div1Handler() {
          console.log('这是触发了 inner div 的点击事件')
        },
        btnHandler() {
          console.log('这是触发了 btn 按钮 的点击事件')
        },
        linkClick() {
          console.log('触发了连接的点击事件')
        },
        div2Handler() {
          console.log('这是触发了 outer div 的点击事件')
        }
      }
    });