<AI>
Web画面上で右クリックをした際にブラウザ標準のメニューを非表示にし、
独自メニュー(コンテキストメニュー)の展開とマウス位置の取得を行うには、
contextmenu イベントと MouseEvent のプロパティ(clientX / clientY)を利用します。
以下のJavaScriptコードは、右クリック位置を取得し、その座標にメニューを表示する基本的な実装例です。
javascript
// 右クリックイベントを監視
window.addEventListener('contextmenu', function(event) {
event.preventDefault(); // ブラウザの標準メニューを非表示にする
// マウス位置(ブラウザ表示領域の左上基準)を取得
const mouseX = event.clientX;
const mouseY = event.clientY;
// ここで独自メニュー(id="my-menu")を表示する処理
const menu = document.getElementById('my-menu');
menu.style.left = mouseX + 'px';
menu.style.top = mouseY + 'px';
menu.style.display = 'block';
});
// 画面のどこかをクリックしたら独自メニューを閉じる
window.addEventListener('click', function() {
document.getElementById('my-menu').style.display = 'none';
});
マウス座標の取得に関する注意点
clientX と clientY は「表示領域の左上」が基準となります。
ページ全体に対する絶対座標(pageX / pageY)や、画面全体基準(screenX / screenY)など、
目的のUIに合わせて適宜使い分けることが可能です。
マウスイベントの詳細については、MDN Web DocsのMouseEvent のリファレンスをご参照ください。