クリックイベント・キーイベント
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"