ライブラリのない Web ページにカスタムの右クリック メニューを作成するにはどうすればよいですか?

Web ページにカスタムの右クリック メニューを作成する

事前構築されたライブラリを使用せずに Web ページにカスタムの右クリック メニューを追加するにはでは、contextmenu イベントを利用できます。プロセスの内訳は次のとおりです。

1. Contextmenu イベントをリッスンします:

ユーザーが Web ページ内の要素を右クリックすると、contextmenu イベントがトリガーされます。このイベントをリッスンするには、ドキュメントの で次の JavaScript コードを使用します。セクション:

<code class="javascript">if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    // Here you will draw your own menu
    // However, don't forget to use e.preventDefault() to disable the default context menu
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    alert("You've tried to open context menu");
    window.event.returnValue = false;
  });
}</code>

2.デフォルト メニューを無効にする:

デフォルトでは、ブラウザは独自のコンテキスト メニューを表示します。これを防ぐには、イベント リスナー内で e.preventDefault() を呼び出す必要があります。これにより、デフォルトのメニューが非表示になり、代わりにカスタムメニューを表示できるようになります。

3.カスタム メニューの表示:

HTML、CSS、JavaScript を使用してカスタムの右クリック メニューを作成できるようになりました。メニューの位置、サイズ、内容を定義できます。以下は、2 つのオプションを含む単純なメニューを表示するサンプル コードです:

<code class="javascript">// Create the menu element
var menu = document.createElement('div');
menu.id = 'custom-menu';

// Style the menu
menu.style.position = 'absolute';
menu.style.backgroundColor = '#ffffff';
menu.style.border = '1px solid #000000';
menu.style.zIndex = '10';

// Add menu items
var item1 = document.createElement('div');
item1.innerHTML = 'Option 1';
item1.onclick = function() {
  alert('Clicked Option 1');
};

var item2 = document.createElement('div');
item2.innerHTML = 'Option 2';
item2.onclick = function() {
  alert('Clicked Option 2');
};

// Append items to the menu
menu.appendChild(item1);
menu.appendChild(item2);

// Append the menu to the document
document.body.appendChild(menu);</code>

4.メニューを配置します:

最後に、マウス カーソルを基準にしてメニューを配置する必要があります。カーソルの位置は、イベント オブジェクトの e.clientX プロパティと e.clientY プロパティから取得できます。次に、それに応じてメニューの位置を調整します。

これは簡略化された例であり、特定の要件に合わせてカスタム メニューをカスタマイズできることに注意してください。これらの手順に従うことで、外部ライブラリを使用せずに完全に機能する右クリック メニューを作成できます。

以上がライブラリのない Web ページにカスタムの右クリック メニューを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。