Vue.js でマウスの右クリックイベントを指定するときのイディオム

@click.right とするだけではなかなか思い通りに動きません。

どうすればよいか簡単に言うと「Vue.js の最新版を使い @click.right.prevent と書いてその要素のスタイルに user-select: none を指定する」です。

See the Pen Vue.js mouse click event check by Akira Ikeda (@akicho8) on CodePen.

1. Vue の最新版を使う

• Vue 2.5.2 とかちょっと前のバージョンだとそもそもバグっていて動かない
• Vue 2.5.16 だと動くことを確認

1. .prevent 装飾子を付ける

• 付けないとブラウザのコンテキストメニューまで表示される

1. CSS で該当要素に user-select: none を指定しておく

• Macのトラックパッドを二本指でタップすると右クリックしたことになる
• そのとき、このスタイルを指定してないとクリックした部分のテキストが選択されてしまう
• Bulma を使っている場合は is-unselectable クラスを指定すればいい