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

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="..."
アルファベットでないキー（キーエイリアス）は以下のように用意されている。
修飾子
対応キー（キーボード）
enter
[Enter]
tab
[Tab]
delete
[Delete]または[Backspace]
space
[Space]
up
[↑]
down
[↓]
left
[←]
right
[→]

clickイベントの修飾子

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

システム修飾子

v-on:click.shift などはシステム修飾子と呼ばれる。
他には以下のようなものが用意されている。
修飾子
対応キー
ctrl
[Ctrl]
alt
[Alt]
shift
[Shift]
meta
Winでは[Windows] / Macでは[command]※
※このボタン
notion image
 

exact修飾子

v-on:keydown.enter=”…” ←この場合だと例えば[Shift]+[Enter]などでもイベントが発生してしまう。
これを[Enter]のみに限定したい場合に.exact 修飾子を使う。
v-on:keydown.enter.exact="onEnterKey"

© Hayato Kamiyama 2023 - 2025