Vue 事件修饰符、按键修饰符、鼠标按键修饰符 简介

=======================事件修饰符=======================

一、事件可以同时绑定多个修饰符，比如： 

<a @click.stop.once="doThis"></a>

  

二、绑定多个修饰符时，有先后顺序且意义可能也不一样，比如：

<div @click.prevent.self="...">
...
</div>


<div @click.self.prevent="...">
...
</div>

这二个代码的意义是不一样的：

@click.prevent.self 时，表示阻止他的单击事件，此时其内部子元素的单击全部失效。因为它无法向下传递。

@click.self.prevent时，表示只阻止当前DIV的单击事件，其子元素的单击仍然有效。 

 

 

.stop 阻止事件向上冒泡 

默认情况下子元素事件会向上冒泡，比如下例中点击按钮，依次执行 按钮的单击事件，然后执行父容器div的单击事件。

<template>
    <div @click="event1" style="padding-top:200px;">
        <button @click="event2">Click</button>
    </div>
</template>

<script setup>
    function event1(){
        console.log('单击了父容器');
    }
    
    function event2(){
        console.log('单击了按钮');
    }
</script>

  如果仅仅想触发按钮单击事件，而不触发父容器的单击事件，我们就要阻止事件向上冒泡，代码如下：

<template>
    <div @click="event1" style="padding-top:200px;">
        <button @click.stop="event2">Click</button>
    </div>
</template>

<script setup>
    function event1(){
        console.log('单击了父容器');
    }
    
    function event2(){
        console.log('单击了按钮');
    }
</script>

 

 

.prevent 阻止元素的默认行为。

比如在表单中，默认提交之后会重新刷新页面，我们可以阻止这个行为，代码如下：

<form @submit.prevent="onSubmit"></form>

比如a标签点击之后，会打开对应的网址，我们也可以通过此修饰符阻止这个行为，代码如下：

<a href="http://www.baidu.com" @click.prevent>点击无法打开网址</a>

 

 

.self 只接收前元素自身触发的事件。比如不接受通过冒泡传递过来的事件。

默认情况下子元素事件会向上冒泡，比如下例中点击按钮，依次执行 按钮的单击事件，然后执行父容器div的单击事件。

<template>
    <div @click="event1" style="padding-top:200px;">
        <button @click="event2">Click</button>
    </div>
</template>

<script setup>
    function event1(){
        console.log('单击了父容器');
    }
    
    function event2(){
        console.log('单击了按钮');
    }
</script>

如果我想只点击父容器才能触发event1事件，点击子按钮无效。这时可以给父容器的click事件增加.self修饰符。

<template>
    <div @click.self="event1"  style="padding-top:200px;">
        <button @click="event2">Click</button>
    </div>
</template>

<script setup>
    function event1(){
        console.log('单击了父容器');
    }
    
    function event2(){
        console.log('单击了按钮');
    }
</script>

 

 

.once 事件只执行一次。

比如下例中，按钮只能点击一次，以后点击不再触发事件。

<template>
        <button @click.once="event1">Click</button>
</template>

<script setup>
    function event1(){
        console.log('单击了按钮');
    }
</script>

 

 

.capture 当内层元素触发事件时，它会依次由内向外执行，而.capture修饰符就是改变这个顺序。使事件顺序变成由外到内的执行顺序。

<template>
    <!-- 本例中点击按钮，先执行 event1事件，再执行 event2事件-->
    <div @click.capture="event1"  style="padding-top:200px;">
        <button @click="event2">Click</button>
    </div>
</template>

<script setup>
    function event1(){
        console.log('单击了父容器');
    }
    
    function event2(){
        console.log('单击了按钮');
    }
</script>

 

.passive 元素的滚动事件是在滚动完成之后执行。此修饰符能使事件立即发生而不用等待。

<div @scroll.passive="onScroll">...</div>

1、.passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。

2、请勿同时使用 .passive 和 .prevent

 

 

 

=======================按键修饰符=======================

此修饰符只支持PC端，所以在UNI-APP中无效，以下是PC端整理：

一、监听特殊按键：

<input type="text" @keyup.enter="event"/>

常用特殊按钮列表：

• .enter
• .tab
• .delete (捕获“Delete”和“Backspace”两个按键)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .meta

 

二、监听其它键

比如监听是否按下字母A，此时我们要获取大写字母A的ASCII码。A的ASCII码为65

<input type="text" @keydown.65="event"/> // 输入a或A都会触发事件

以上代码，你会神奇的发现：不管你输入A或a 都会触发event事件。

而你把65改成97(小a对应的ascii码)时，确发现不论你输入A或a都无法触发event事件。

<input type="text" @keydown.97="event"/>  // 输入A或a，均不能触发事件

注意事项：

这是因为 keyup、keydown在监听时不区分大小写，而keypress 区分大小写。

同时keyup、keydown能识别功能键（如ctrl、alt），keypress 不能识别功能键。

 

 

三、创建组合键

比如我想监听文本框的全选操作，代码如下：

<input type="text" @keydown.ctrl.65="event"/>

 

 

四、利用 exact 修饰符精确匹配按钮

比如以下代码中监听文本框的全选操作。此时，如果我按了ctrl + a + alt 也会触发event事件。通过增加 .exact 修饰符，让它只有在ctrl + a 下才能触发事件。

<input type="text" @keydown.exact.ctrl.65="event"/>

 

五、鼠标按键修饰符

• .left
• .right
• .middle

检测是否是鼠标右击操作

<div  id="app"  @click.right="event"> ... </div>