【Vue】clickイベントを発火させる方法を解説。右クリックやダブルクリックも認識できる!?

プログラミング

今回はVueのクリックイベントについて解説をしていきます。

JavaScriptでクリックイベントを取得してアラートの表示、イベントの発火などいろいろな場面で使用されることが多いのでクリックイベントについてはおさえておきましょう!

この記事を読んでわかること
  • Vueでのクリックイベントの発火方法
  • シングルクリックをしたときのイベント
  • ダブルクリックをしたときのイベント
  • 右クリックしたときのイベント
500 Internal Server Error

クリックイベントを取得する方法を紹介します。

さっそくですが、結論

<button @click="click">結果を表示</button>

の記述でクリックイベントを発火させれます。

ダブルクォーテーションの中には呼びたい関数を記述することで呼び出すことができます。

引数を渡したいときは@click="click(引数)"と記述することで対応できます。

Vue clickイベントを取得する方法

  1. HTMLでボタンを準備
  2. Vueでクリックされたときに実行される関数を準備

上記の流れで要素の準備をしていきます。

HTML
<button @click="click">ボタン</button>
Vue
  methods: {
    click() {
      alert("ボタンがクリックされました。");
    },
  },

2つの記述でクリックしたときにのアラートを表示する動きを再現できます。

See the Pen Vue Sample by xhisashix (@xhisashix) on CodePen.

その他のイベント

ダブルクリック

ボタンをダブルクリックしたときのイベント

<button @click="dblclick">ダブルクリック</button>
  methods: {
    dblclick() {
      alert("タブルクリックされました。")
    },
  },

右クリック

ボタンを右クリックしたときのイベント

  <button @click.right="rightClick">右クリック</button>
    rightClick() {
      alert("タブルクリックされました。")
    },

まとめ

vueでは、クリックのイベントを簡単に取得することができます。

ダブルクリックなど、使う頻度は少ないかもしれませんが、PWAでのアプリ開発の時などで使われているのをよく目にします。

覚えていて損はないと思うので頭の片隅に置いておきましょう!

Vue 初心者におすすめの参考書

プログラミング
スポンサーリンク
スポンサーリンク
e-logsをフォローする
スポンサーリンク
eLogs

コメント

タイトルとURLをコピーしました