クリックイベント・キーイベント

date

Mar 5, 2023

repo_url

slug

click-key-event

status

Published

summary

type

Post

thumbnail_url

tags

vue

outer_link

Vueでは以下のように、クリックイベントとキーイベントに専用の修飾子が用意されている。

<script setup lang="ts">
import {ref} from "vue";

const msg = ref("まだです!");
const onEnterKey = (): void => {
	msg.value = "エンターキーが押下されました。";
};
const onRightButtonClick = (): void => {
	msg.value = "ボタンが右クリックされました。";
};
const onShiftClick = (): void => {
	msg.value = "シフトを押しながらクリックされました。";
};
</script>

<template>
	<p>{{msg}}</p>
	<input type="text" v-on:keydown.enter="onEnterKey"><br>
	<button v-on:click.right="onRightButtonClick">右クリック</button><br>
	<button v-on:click.shift="onShiftClick">シフトを押しながらクリック</button><br>
</template>

キーイベントの装飾子

keydown 以外にもkeypress keyup といったキーイベントには、押されたキーに対応する装飾子を以下のようにさらに付与できる。

<!--[Qキーが押された際のイベントを設定]-->
v-on:keydown.q="..."

アルファベットでないキー（キーエイリアス）は以下のように用意されている。

clickイベントの修飾子

v-on:click.right のようにclickイベントと組み合わせる修飾子には、以下のようなものが用意されている。

システム修飾子

v-on:click.shift などはシステム修飾子と呼ばれる。

他には以下のようなものが用意されている。

※このボタン

exact修飾子

v-on:keydown.enter=”…” ←この場合だと例えば[Shift]+[Enter]などでもイベントが発生してしまう。

これを[Enter]のみに限定したい場合に.exact 修飾子を使う。

v-on:keydown.enter.exact="onEnterKey"