事件修饰符

Vue中的事件修饰符：

1、prevent:阻止默认事件；

2、stop:阻止事件冒泡；

3、once：事件只触发一次；

4、capture：使用事件的捕获模式；

5、self：只有event.target是当前操作的元素时才触发事件；（只有和当前事件触发的标签一致时才会触发）

6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕

prevent:阻止默认事件

点完之后不会发生默认事件

 
 


    点击去百度

 
 

点完超链接不会发生跳转，因为prevent阻止了a标签的默认事件（跳转）

stop:阻止事件冒泡

p和button都有show事件，当点击按钮时，button会触发show，执行完成后，冒泡到外层，p的show也会触发，加上了stop,阻止了button的冒泡，所以p不会触发show事件。

    
        小按钮
    
 

capture：使用事件的捕获模式

    
    
    
 
    
 

 
 
 

 

    
        p1
        
            p2
        

 
    
 
 

 

正常情况下是先进行事件的捕获，这个过程是有外到内的，捕获完成后，该事件触发，在冒泡到外层。

没加capture时，点击p2,会打印出2 1，这个是冒泡产生的结果

加上capture后

self:与当前事件一致时触发

.self event.target是当前的对象时才会触发 只有和他一样的标签时才会触发

冒泡冒上去的还是button对象，而不会变成p

 
 
    
    
        self按钮
    

上面的加上.self，show事件只会触发一次，层的p不会被触发。

passive：事件的默认行为立即执行

passive立即执行，不会等到回调函数执行完毕才执行，默认情况是回调函数执行完后才会执行事件的行为。

    
 




    

        
1
        
2
        
3