本文共 995 字，大约阅读时间需要 3 分钟。

vue官网上指出：

在事件处理程序中调event.preventDefault() 或 event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。 event.preventdefault():阻止默认事件发生，例如：a标签默认会刷新，表单的提交。 event.stopPropagation()终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。即不会再产生捕获和冒泡事件。

vue事件修饰符：

(1).stop // 阻止事件继续传播 即阻止它的捕获和冒泡过程

实例：如下点击内部点击，阻止了冒泡过程，即只执行tz这个方法，如果不加.stop，讲先执行方法，后执行gett方法。即通过了冒泡这个过程。

   
    外部点击            
    
     内部点击
    
   

**（2）.prevent **

//阻止默认事件发生 即event.preventdefault():

实例： 阻止了a标签的默认刷新

（3）.capture

// 添加事件监听器时使用事件捕获模式，即在捕获模式下触发 实例：在点击最里层的点击6时，gett方法先执行，因为gett方法在捕获模式执行的，先与冒泡事件。下列执行顺序 geet->set->tz ,因为后俩个还是冒泡模式下触发的事件。

   
    外部点击5    
    
     内部点击5        
     
      点击6
     
    
    
   

（4）.self //当前元素自身时触发处理函数时才会触发函数，

原理：是根据event.target确定是否当前元素本身，来决定是否触发的事件/函数 实例：如果点击内部点击2，冒泡不会执行gett方法，因为event.target指的是内部点击2的dom元素，不是外部点击1的，所以不会触发自己的点击事件

   
    外部点击1
    
     内部点击2
    
   

（5）.once //只触发一次

实例：

   
    once
   

原文连接：

转载地址：http://akylf.baihongyu.com/