技術間

IT技術(主にwebとインフラ)についてメモを残していきたいと思っています

Angularによる右クリック検知

Angular4.2.2に関する記事です。

Angularを使用してWebアプリを開発する日々が続いています。 独自にコンテキストメニューを実装する必要があり、Angularでどのように右クリックを検知するのか調べました。

<!-- app.component.html -->
<button (contextmenu)=contextMenuFunction($event)></button>
// app.component.ts

contextMenuFunction(event) {
  let x = event.x;
  return true;
}

Angularチュートリアルにもあるclickイベントの紐付けを、contextmenuイベントに変えるだけで、特別難しいことはないですね。

自作したメソッド(今回はcontextMenuFunction)に$eventを渡してあげると、MouseEventのプロパティを取得することができます。 クリックされた座標を知りたい、といったときにMouseEventのプロパティを見ることになりますが、MouseEventは座標だけでも様々なプロパティを持っているので、必要に応じて選択しましょう。

MouseEvent.clientX
ローカル (DOM content) 座標における、マウスポインタの X 座標。
MouseEvent.clientY
ローカル (DOM content) 座標における、マウスポインタの Y 座標。
MouseEvent.movementX
前の mousemove イベントの位置に対して相対的な、マウスポインタの X 座標。
MouseEvent.movementY
前の mousemove イベントの位置に対して相対的な、マウスポインタの Y 座標。
MouseEvent.offsetX
対象ノードのパディング境界の位置に対して相対的な、マウスポインタの X 座標。
MouseEvent.offsetY
対象ノードのパディング境界の位置に対して相対的な、マウスポインタの Y 座標。
MouseEvent.pageX
ドキュメント全体に対して相対的な、マウスポインタの X 座標。
MouseEvent.pageY
ドキュメント全体に対して相対的な、マウスポインタの Y 座標。
MouseEvent.screenX
グローバル (スクリーン) 座標における、マウスポインタの X 座標。
MouseEvent.screenY
グローバル (スクリーン) 座標における、マウスポインタの Y 座標。
MouseEvent.x
MouseEvent.clientX の別名。
MouseEvent.y
MouseEvent.clientY の別名。

説明文を見るだけではよくわからないですね・・・


参考

MouseEvent - Web API インターフェイス | MDN
contextmenu - Angular 2 right click events? - Stack Overflow