25 修饰键盘事件与鼠标事件

LIYI

发布于 2020-02-13 11:57:47

2.6K0

发布于 2020-02-13 11:57:47

如果系统之间key名与按键方式存在差异，最好还是使用keyCode较为简单

目录

修饰键盘事件
使用组合控制键修饰键盘事件
精准修饰控制
修饰鼠标事件

修饰键盘事件

一般js监听键盘事件，例如keyup，无论用户是按下哪个键，例如a/b/c，事件函数都会触发。vue为了简化开发，对键盘事件、鼠标事件，提供了修饰符，方便只在用户按下某个特定键值时触发函数。

例如：

<input placeholder="enter" v-on:keyup.enter="onKey" /><br/>

只响应回车按键。enter是键盘事件的keyCode。

有以下常用的key名可被使用：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

可以使用如下示例监听任意键盘事件：

<!-- 修饰键盘事件 -->
<input placeholder="any" v-on:keyup="onKey" /><br/>
methods:{
    onKey(e){
      let {key,keyCode} = e
      console.log('e',key, keyCode);
      
    },

通过该示例，可以查看各个特殊按键的key与keyCode。例如回车按键，key=Enter，keyCode=13。

使用keyCode也可以修饰，直接将keyCode数字放在事件名称后面，示例：

<input placeholder="enter=13" v-on:keyup.13="onKey" /><br/>

当使用key做修饰符时，要将大驼峰全名法转为短横线间隔全名法，例如：

<input placeholder="arrow-down" v-on:keyup.arrow-down="onKey" /><br/>
<input placeholder="arrow-left" v-on:keyup.arrow-left="onKey" /><br/>

arrow-down与arrow-left分别是mac系统的向下方向键与向左方向键的key。有些文章说是page-down、page-left，这是因为在mac系统上，PageDown=Fn+ArrowDown，同时PageUp=Fn+ArrowUP。

如果系统之间key名与按键方式存在差异，最好还是使用keyCode较为简单。如果记不住keyCode数字，可以用上面的onKey函数检测一下。

使用组合控制键修饰键盘事件

有些时候需要按下组合键，例如监听同时按下alt键的情况，例如：

!-- 使用组合控制键修饰键盘事件 -->
<input placeholder="any.alt" v-on:keyup.alt="onKey" /><br/>

有以下组合键可被使用：

.ctrl
.alt
.shift
.meta

其中meta在mac系统上对应 command 键 (⌘)。在 Windows 系统上对应徽标键 (⊞)。

精准修饰控制

有需要精准监听用户是否只按下了某些键，例如CTRL+1键，而如果同时按下了CTRL+SHIFT+1，则略过，这种情况下需要使用精准修饰符exact，示例：

<!-- 精准控制，只有ctrl&1触发 -->
<input placeholder="keyup.ctrl.49.exact" v-on:keyup.ctrl.49.exact="onKey" /><br/>

修饰鼠标事件

不只键盘事件，鼠标鼠标也可以修饰，例如：

<!-- 修饰鼠标事件 -->
<input placeholder="mouseup.left" v-on:mouseup.left="onMouse" /><br/>
<input placeholder="mousedown.right" v-on:mousedown.right="onMouse" /><br/>

分别代表监听鼠标左键按下与右键按下。

源码

https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/20200121

本文有关的主要在：

vue-and-go-example/simple-vue-project/src/KeyModifier2.vue

参考链接

https://cn.vuejs.org/v2/guide/events.html?#系统修饰键