vue中的事件修饰符once,prevent,stop,capture,self,passive

目录

• vue中的事件修饰符
• 1. once
• 2. prevent
• 3. stop
• 4. capture和self
• 5. passive与prevent相反
• vue事件处理（修饰符）
• 事件修饰符
• 按键修饰符
• 系统修饰键
• 鼠标按钮修饰符

vue中的事件修饰符

1. once

只执行一次

只有在第一次点击时会执行，再次点击不会起作用

2. prevent

阻止默认程序，比如form表单中的summit提交按钮，会自己提交，

        first_submit
        get
        
    

现在的submit会进行数据提交，和跳转

        first_submit
        get
        
    

prevent，直接不让你提交了，也不跳转，只是执行自己命名的函数，个人觉得这个修饰符使用的并不多，完全可以不做submit，我自己写个click更方便啊！！

3. stop

阻止函数的传递

            

                123
            
        

此时点击子级的div会，先弹出2，再弹出1

            

                123
            
        

点击子级的div，此时的执行结果是，先弹出1，再弹出2（capture的作用）

            

                123
            
        

点击子级的div，此时的执行结果是只会弹出1（capture决定的执行顺序），不会执行alert(‘2’)

            

                123
            
        

这样就只会弹出2，不会弹出1 了

总之，stop就是你自己执行你的就好了，别去打扰别人。

4. capture和self

因为在使用capture和self的时候有一些迷糊，有一篇单独介绍他俩个的文章

初步理解vue中的capture和self

5. passive与prevent相反

javascript中的preventDefault()

passive就是专门用来跟他们作对的，使他们不起作用，同时，passive不能和prevent同时使用，prevent会失效，而且会警告！！ 

vue事件处理（修饰符）

事件修饰符

在vue中为了只处理纯粹的数据逻辑，而不是去处理 DOM 事件细节，vue.js提供了事件修饰符。

• .stop 阻止单击事件继续传播

• .prevent 提交事件不再重载页面

• .capture 添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理

...

• .self 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的

...

• .once 点击事件将只会触发一次

• .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 `onScroll` 完成，这其中包含 `event.preventDefault()` 的情况

...

注：修饰符可以串联，使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

• enter
• page-down

//只有在 `key` 是 `Enter` 时调用 `vm.submit()`

//处理函数只会在 $event.key 等于 PageDown 时被调用

系统修饰键

• .ctrl
• .alt
• .shift
• .meta

 

Do something

注：请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件

A
 

A
 

A

鼠标按钮修饰符

• .left
• .right
• .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。