vue.jsの@mousedown.preventについて簡単なサンプルコードで解説
4 回閲覧されました
みなさんこんにちは、jonioです。
今回はvue.jsの@mousedown.preventについて簡単なサンプルコードで解説します。
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
@mousedown.prevenとは
例えばマウスでフォームをクリックした時にフォームがクリックされた状態になり値の入力ができます。
フォーム以外をクリックするとフォームのクリック状態が外れ値の入力ができなくなります。
この様なブラウザに標準で入っている動作を止めるのに使います。
ブラウザに標準で入っている動作を止めるだけなので自分で作成したメソッドの動作を止めることはできません。
何に使うかは分かったと思うのですがサンプルコードで理解を深めましょう。
サンプルコード
こういう状況で考えます。
フォームがあったとします。
フォームをクリックすると一覧が表示されて一覧のどれかをクリックするとその値がフォームに表示されるのを考えます。
下記のコードで考えます。
<template>
<div class="autocomplete">
<input
v-model="formValue"
@focus="open = true"
@blur="open = false"
placeholder="入力してね"
/>
<ul
v-if="open"
class="suggest"
>
<li
v-for="s in suggestions"
:key="s"
@mousedown.prevent="pick(s)"
>{{ s }}</li>
</ul>
<p>選択：{{ formValue }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const formValue = ref('');
const open = ref(false);
const suggestions = ['apple', 'banana', 'grape'];
function pick(s) {
formValue.value = s;
open.value = false; // 自分で閉じる
}
</script>
<style scoped>
.suggest {
border: 1px solid #ccc; padding: 4px; width: 200px; margin-top: 4px;
}
.suggest li {
cursor: pointer; padding: 2px 4px;
}
.suggest li:hover {
background: #f0f0f0;
}
</style>「@mousedown.prevent」は17行目で使っています。
動作の流れを説明します。
フォームをクリックすることで5行目よりopenがtrueになって10行目〜20行目の一覧が表示になります。
もし「@mousedown.prevent」の記述がないと一覧のどれかを選択した時にフォームのクリックが外れるので6行目が動作してopenがfalseになって一覧が表示されなくなり選択ができなくなります。
このクリックが外れるブラウザの標準動作を止める為に@mousedown.preventの記述をわざわざしています。
だから@mousedown.preventを使うのはブラウザの標準動作をするとまずい状況になる場合に使います。