ウェブサイトの実装において欠かすことのできないクリックイベント。
Vue でもクリックイベントに対する便利な機能がたくさんあるので、ここにまとめておきたいと思います。
まずは基本の click イベントの設定から。Vue でイベントをハンドリングするには、v-on:イベント名と記述します。
click イベントをハンドリングするにはv-on:clickという記述になります。
また、v-on:には省略記法があり、@という書き方ができる為、この記事でも@clickという書き方を採用します。
<template>
<div>
<button v-on:click="onClickButton('v-on:')">v-on:</button>
<button @click="onClickButton('@click')">@click</button>
</div>
</template>
<script>
export default {
methods: {
onClickButton(text) {
alert(text)
}
}
}
</script>
前述したイベントに修飾子をつけることでイベントハンドリングが簡単にできるようになります。
修飾子の書き方は@イベント.修飾子というように、イベントの後に.で繋いで記述します。また修飾子は複数繋げて記述することも可能です。
<template>
<div>
<button @click.once="onClickButton('@click')">@click</button>
</div>
</template>
.stop修飾子はイベントの伝搬を止めます。
ネイティブのevent.stopPropagation()を.stop修飾子を付けることで実装することができます。
Event.stopPropagation() | MDN (opens new window)
<template>
<div>
<div @click="onClickParent">
<div @click="onClickChild">`.stop`修飾子無し</div>
</div>
<div @click="onClickParent">
<div @click.stop="onClickChild">`.stop`修飾子あり</div>
</div>
</div>
</template>
<script>
export default {
methods: {
onClickParent() {
alert("parent");
},
onClickChild() {
alert("child");
}
}
};
</script>
.prevent修飾子は要素の持つデフォルトイベントをキャンセルします。
ネイティブのevent.preventDefault()を.prevent修飾子を付けることで実装することができます。
Event.preventDefault() | MDN (opens new window)
<template>
<div>
<a
href="https://www.google.com/"
@click="onClickLink('Googleページを開きます。')"
target="_blank"
>
Googleリンク
</a>
<a
href="https://www.google.com/"
@click.prevent="onClickLink('Googleページを開きません。')"
target="_blank"
>
Googleリンク
</a>
</div>
</template>
<script>
export default {
methods: {
onClickLink(text) {
alert(text);
}
}
};
</script>
通常子要素から親要素へ伝搬されて実行されるイベントを、.capture修飾子を付けることで親要素のイベントを先に実行できるようになります。
<template>
<div>
<div @click="onClickParent">
<div @click="onClickChild">`.capture`修飾子無し</div>
</div>
<div @click.capture="onClickParent">
<div @click="onClickChild">`.capture`修飾子あり</div>
</div>
</div>
</template>
<script>
export default {
methods: {
onClickParent() {
alert("parent");
},
onClickChild() {
alert("child");
}
}
};
</script>
通常子要素から親要素へ伝搬されて実行されるイベントを、.self修飾子を付けることで子要素から親要素のイベントが発生しなくなります。
<template>
<div>
<div @click="onClickParent">
<div @click="onClickChild">`.self`修飾子無し</div>
</div>
<div @click.self="onClickParent">
<div @click="onClickChild">`.self`修飾子あり</div>
</div>
</div>
</template>
<script>
export default {
methods: {
onClickParent() {
alert("parent");
},
onClickChild() {
alert("child");
}
}
};
</script>
.once修飾子はイベントの実行を 1 回のみに制限することができます。
<template>
<div>
<div @click.once="onClickOnce">alert</div>
</div>
</template>
<script>
export default {
methods: {
onClickOnce() {
alert("アラートが1回だけでます。");
}
}
};
</script>
Vue3.x で削除された為、割愛。
システム修飾子キーは対応するキーが押されたときにのみイベントを実行することができるようになります。
ctrl キーが押された時にイベントが実行されます。
alt キー（mac は option キー）が押された時にイベントが実行されます。
shift キーが押された時にイベントが実行されます。
meta キーが押された時にイベントが実行されます。
ん？meta キー？そんなキーあったっけ？
以下、公式から引用。
注意: Macintosh キーボードの場合、meta はコマンドキー（⌘）です。Windows のキーボードでは、meta はウィンドウキー（⊞）です。Sun Microsystems のキーボードでは、メタは実線のダイヤモンド（◆）とマークされています。特定のキーボードでは、特に MIT や Lisp マシンのキーボードと Knight キーボード、space-cadet キーボード、メタのような後継機には “META” と表示されます。 Symbolics のキーボードでは、 “META” または “Meta” というラベルが付いています。 システム修飾子キー | Vue.js (opens new window)
mac の場合は command キー、windows の場合は windows キーを指すみたいです。
<template>
<div>
<div @click.ctrl="onClick('ctrl')">ctrl</div>
<div @click.alt="onClick('alt')">alt</div>
<div @click.shift="onClick('shift')">shift</div>
<div @click.meta="onClick('meta')">meta （ ⌘ or windowsキー）</div>
</div>
</template>
<script>
export default {
methods: {
onClick(key) {
alert(key);
}
}
};
</script>
.exact 修飾子はイベントを引き起こすために必要なシステム修飾子の正確な組み合わせを制御します。 .exact 修飾子 | Vue.js (opens new window)
公式の説明だけではわかりずらいですが、例えば同じ要素に@clickと@click.shiftを設定し、shift を押しながらクリックすると、どちらのイベントも実行されてしまいます。これは@clickも@click.shiftも条件としては間違っていないからです。
そこで@click.shiftに.exact修飾子を付与してやると、shift を押しながらクリックした時のみ、イベントが実行されるようになります。
※linter 設定してると、同要素に@clickと@click.shiftを設定すると、「.exact付けろよ😡」ってエラーが出ました🙇
<template>
<div>
<div
@click.exact="onClick('click')"
@click.shift="onClick('click.shift')"
>
Click
</div>
</div>
</template>
<script>
export default {
methods: {
onClick(key) {
alert(key);
}
}
};
</script>
マウスによるイベントをハンドリングする修飾子もあります。
.left修飾子はマウスで左クリックされた時にイベントが実行される。
.right修飾子はマウスで右クリックされた時にイベントが実行される。
.middle修飾子はマウスのホイールボタン（？）クリックされた時にイベントが実行される。
マウスをほとんど使うことがないのであやふやでしたが、windows でもマウスを使用しないこともある為、.middle修飾子を使うのはあまり推奨されないみたいです。
後、一応 mac でもアプリケーションをインストールして middle クリックを使うようにすることができるみたいです。
MiddleClick macOS Catalina (opens new window)
MiddleClick の Big Sur 対応版「Middle」 (opens new window)
<template>
<div>
<div @click.left="onClick('left')">Click Left</div>
<div @click.right="onClick('right')">Click Right</div>
<div @click.middle="onClick('middle')">Click Middle</div>
</div>
</template>
<script>
export default {
methods: {
onClick(key) {
alert(key);
}
}
};
</script>