【Vue.js】マウス操作一覧 【MouseEvent】

マウスイベント一覧

各マウスイベントをこのページで試せます。　
また、マウスイベントのリファレンスはこちらから確認できます。

@auxclick 右クリックイベント

エリアを右クリックしてイベントを発火します。

See the Pen MouseEventAuxClick by Yishida (@yishida05) on CodePen.

@click 左クリックイベント

ボタンを左クリックしてイベントを発火します。

See the Pen MouseEventClick by Yishida (@yishida05) on CodePen.

@contentmenu コンテンツメニュー

エリアを右クリックでコンテンツメニューが表示されます。
contentmenuは別途vue-context-menuのインストールが必要になります。

See the Pen ContextMenu by Yishida (@yishida05) on CodePen.

@dblclick ダブルクリック

エリアをダブルクリックでイベントを発火します。

See the Pen MouseEventDblClick by Yishida (@yishida05) on CodePen.

@mousedown マウスダウン

エリアをクリックでカウントアップされます。
クリックとほぼ同様の処理に見えますが、マウスを押し込んだタイミングでイベントが発火します。

上から順に
・マウスのボタンどこでもクリック（サイドボタンも可）
・マウスの左クリック
・マウスの中央クリック
・マウスの右クリック
の押下時にイベントを発火します。

See the Pen MouseEventMouseDown by Yishida (@yishida05) on CodePen.

@mouseenter @mouseleave カーソルの要素間移動

マウスカーソルの要素間移動でイベントを発火します。

@mouseenter カーソルが付与した要素の外部から付与した要素の内部に移動してきた時にイベントを発火します。

@mouseleave カーソルが付与した要素の内部から付与した要素の外部に移動してきた時にイベントを発火します 。

See the Pen WNQxdKM by Yishida (@yishida05) on CodePen.

@mousemove カーソルの移動

マウスカーソルの移動でイベントを発火します。

@mouseenter や @mouseleave とは違いカーソルの移動そのものでイベントを発火します。

See the Pen MouseEventMousemove by Yishida (@yishida05) on CodePen.

@mouseover カーソルの要素間移動 (子要素も可)

マウスカーソルで要素をまたぐとイベントを発火します。

@mouseenter や @mouseleave とは違い、要素をまたぐ際にイベントを発火し、子要素に移動する際にも発火します。
例えば@mouseleaveは要素内から要素外にカーソルが出た時に発火しますが、@mouseoverは
・親要素→子要素のカーソル移動で親要素、子要素ともにイベントを発火
・子要素→親要素では親要素のみイベントを発火
という処理になります。

See the Pen MouseEventMouseover by Yishida (@yishida05) on CodePen.

@mouseout カーソルの要素間移動 (子要素も可)

マウスカーソルで要素をまたぐとイベントを発火します。

@mouseover の真逆です。要素から出ていくタイミングでイベントを発火します。
@mouseoutは
・親要素→子要素のカーソル移動で親要素のみイベントを発火
・子要素→親要素では親要素、子要素ともにイベントを発火
という処理になります。

See the Pen MouseEventMouseout by Yishida (@yishida05) on CodePen.

@mouseup マウスアップ

@click や @mousedown と似ていますが、イベントがマウスボタンを離したタイミングで発火します。

@mousedownと同様、
上から順に
・マウスのボタンどこでもクリック（サイドボタンも可）
・マウスの左クリック
・マウスの中央クリック
・マウスの右クリック
の解放時にイベントを発火します。 （押下の逆は解放らしいです）

See the Pen MouseEventMouseup by Yishida (@yishida05) on CodePen.

@select テキストの選択

inputフォームのテキストをドラッグすることで、イベントを発火します。

関数にはeventを渡して上げることで選択されたテキストを取得することが出来ます。
event.target.valueで選択された要素全てを取得出来ます。
ただし、どこからどこまでを選択されたかを取得するため
event.target.selectionStartで開始位置と
event.target.selectionEndで終了位置を取得し、substringで event.target.valueからドラッグされた箇所を切り出しています。

See the Pen gOaMvRe by Yishida (@yishida05) on CodePen.

@wheel マウスホイール

枠内でマウスホイールを動かすことでイベントを発火します。
（マウスホイールのｶｸｯｶｸｯで１カウントアップしますが、そういう規格になってるんですかね？）

See the Pen PoPzQRB by Yishida (@yishida05) on CodePen.

おわりに

Vueのマウスイベントをまとめました。
また他にも pointerlockchange pointerlockerror が存在するのですがvueで実装する方法がわかりませんでした。コメント欄にて教えて頂ければ幸いです。
@selectで出てきたeventですが、console.logで出力すると色んな値を持っていることがわかります。機会があればeventを使って色んなことが出来るんだよ～って記事を書きたいと思います。
読んでいただきありがとうございました。活用して頂ければ嬉しいです！