(转)vue中 v-on 、绑定事件的修饰符

1、stop

功能：阻止事件冒泡
使用方法:

B

举例：

    

        A
        B
    
          

A按钮没添加stop，B按钮添加了stop。
点击A按钮，控制台里会出现两个1。点击b按钮，控制台只出现一个1。

---

2、prevent

功能：阻止默认事件
使用方法：

A 


B

举例：

        A
        

        B
    

A链接的默认事件是跳转到baidu.com，添加了prevent后，点击A，默认事件无效。

B链接的默认事件也是跳转到baidu.com，添加了带有表达式的prevent后，点击B，跳转事件无效，但手动添加的show方法有效，控制台中显示1，因为show不是默认事件。

---

3、capture

功能：添加事件侦听器时使用 capture 模式(把默认的冒泡变为捕获)
使用方法：

    A

举例：

    

        A
    

在button的父节点添加了capture，此时，再点击A，控制台将显示1 2，这证明现在是捕获。
如果不加captrue,则是冒泡，那么控制台将显示2 1。
要注意，捕获的capture的修饰符必须在父节点使用。

---

4、self

功能：只当事件是从侦听器绑定的元素本身触发时才触发回调。
使用方法：

举例：

    

        第一层
        

            第二层
            

                第三层
                

                    第四层
                
            
        
    

假设我们没有在第二层的div上添加self，那么我们点击第四层的时候，控制台将会出现结果4 3 2 1（冒泡），添加了之后，点击第四层，控制台显示4 3 1，因为第二层的self把第二层的事件设置成了仅自己调用时才有效，所以冒泡把第二层跳过了。

---

5、.{keyCode | keyAlias}

功能：用特定按键触发事件
使用方法：

举例:

在第一个input中，按回车键，控制台输出1.
在第二个input中，按right键，控制台输出2.

---

6、native

功能：监听组件根元素的原生事件。
用法和举例：

使用native修饰符需要先创建一个自定义组件，然后在html中调用组件时，再使用。
如果v-on:click不加.native,那么点击是无效的，控制台不会出现任何内容。

---

7、once

功能：只触发一次回调。
用法：

举例：

多次点击，控制台只出现一次结果。

---

8、left | middle | right

功能：鼠标的左键 中键 右键触发的事件。
用法:

AAA
BBB
CCC

举例：

    
AAA
    
BBB
    
CCC

鼠标左键点击AAA，控制台输出1
鼠标中键点击BBB，控制台输出2
鼠标右键点击CCC，控制台输出3

9、passive
passive 是什么？
https://blog.csdn.net/tengxy_cloud/article/details/52858742
https://www.cnblogs.com/ziyunfei/p/5545439.html

功能：以 { passive: true } 模式添加侦听器
用法：

...

passive用于优化移动端的前端性能，我没做测试。

作者：kangaroo_v
链接：https://www.jianshu.com/p/0e10fe47bff6
来源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。