【Vue.js】クリックイベントを発火させる方法【サンプルコード】

2021年1月21日

手っ取り早くこのページのサンプルコードを検証するには、下記のvueライブラリを事前に読み込んでおいてください。

Vueでクリックイベントを簡単に生成する方法

Vueでは、クリックイベントを要素に@click=”処理内容”、またはv-on:click=”処理内容”と書くことで簡単に設定できます。

<div id="app-1">
    <input type="button" value="クリックしてください" @click="alert('Hello Vue!')">
</div>

<script>
new Vue({
    el: '#app-1',
});
</script>

また、処理はセミコロンで区切って複数書くことが出来ます。
処理内容が増えて冗長化した場合は、関数にまとめると良いでしょう。

<div id="app-2">
    <input type="button" value="クリックしてください" @click="alert('Hello 1!'); alert('Hello 2!');">
</div>

<script>
new Vue({
    el: '#app-2',
});
</script>

クリックイベントはメソッド（関数）を呼び出すことも出来る

処理内容には、methodsで定義した関数を呼び出すことが出来ます。

<div id="app-3">
    <input type="button" value="クリックしてください" @click="hoge('Method!')">
</div>

<script>
new Vue({
    el: '#app-3',
    methods : {
        hoge : function(text){
            alert('Hello ' + text);
        }    
    }
});
</script>

クリックした要素を取得する方法

イベントが発生した要素は$eventで取得することが出来ます。

下記はイベントが発生した要素のテキスト内容を取得するプログラムです。

<div id="app-4">
    <div @click="hoge('Method!', $event)">クリックしてください</div>
</div>

<script>
new Vue({
    el: '#app-4',
    methods : {
        hoge : function(text, event){
            var domtext = event.target.textContent;
            alert('text : ' + text + ' domtext : ' + domtext);
        }    
    }
});
</script>

イベント修飾子

クリックイベントにpreventDefaultを組み込む方法

クリックイベント時に、デフォルトの動作を発生を阻止するpreventDefaultを組み込みたい場合、click.prevent=”処理”という形で記述します。

下記のサンプルプログラムで、aタグの遷移が無効化されているのをご確認ください。

<div id="app-5">
    <a href="https://kinocolog.com" @click.prevent="alert('Hello Vue!')">クリックしてください</a>
</div>

<script>
new Vue({
    el: '#app-5',
});
</script>

クリックイベントに要素の伝播を防ぐ（子要素のイベントのみ発生させる）方法

以下のようなプログラムでchildをクリックすると、親要素のイベントも呼び出されてしまいます。

<div id="app-6">
    <div style="background-color: pink" @click="alert('Hello, Parent!')">
        <span style="background-color: blue"  @click="alert('Hello, Child!')">child</span>
    </div>
</div>

<script>
new Vue({
    el: '#app-6',
});
</script>

これを、親要素への伝播を阻止し、子要素のみのイベントを呼び出したい場合は、.stopの記述を行います。

<div id="app-7">
    <div style="background-color: pink" @click="alert('Hello, Parent!')">
        <span style="background-color: blue"  @click.stop="alert('Hello, Child!')">child</span>
    </div>
</div>

<script>
new Vue({
    el: '#app-7',
});
</script>

1度だけクリックイベントを引き起こしたい場合は.onceと記述

ページ読み込み後、1度だけクリックイベントを行わせたい場合は、.onceと記述します。

<div id="app-8">
    <input type="button" value="クリックしてください" @click.once="alert('Hello Vue!')">
</div>

<script>
new Vue({
    el: '#app-8',
});
</script>

複数のイベント修飾子を組み合わせる方法

複数のイベント修飾子を組み合わせたい場合は、使用するイベント修飾子をドットでつなぎます。

<div id="app-9">
    <a href="https://kinocolog.com" @click.prevent.once="alert('Hello Vue!')">クリックしてください</a>
</div>

<script>
new Vue({
    el: '#app-9',
});
</script>

---

以上、クリックイベントを発火させる方法、でした。