カスタムの右クリック メニューを Web ページに追加するにはどうすればよいですか?

現代では、Web ページを右クリックすると、いくつかのオプションや機能を含むリストが表示されます。このポップアップ メニューはコンテキスト メニューとも呼ばれ、ブラウザによって提供されるデフォルトのポップアップ メニューです。このメニュー リストの項目はブラウザによって異なります。ブラウザによっては、より多くの機能を提供するものもありますが、機能が制限されているものもあります。

ただし、ここでは、必要な数のオプションを備えたカスタム コンテキスト メニューまたは右クリック メニューを Web ページに追加する方法を紹介します。ただし、カスタム コンテキスト メニューを追加する前に、Web ページのデフォルトの右クリックの動作を変更する必要があります。これにより、デフォルトのコンテキスト メニューが開きます。カスタム コンテキスト メニューを追加するには、次の 2 つの手順が必要です:

• デフォルトの右クリック メニューを表示するデフォルトの動作を変更します。

• 独自のカスタム コンテキスト メニューを追加し、マウスを右クリックして Web ページ上に表示します。

実際のコード例を使用して、上記の 2 つの手順を段階的に詳しく理解しましょう。

デフォルトのコンテキストメニューを削除または非表示にする

Web ページを右クリックしたときにカスタム コンテキスト メニューを表示するには、まず preventDefault() メソッドを含む関数を # # に割り当てて、デフォルトのコンテキスト メニューを削除または非表示にする必要があります。 #document.oncontextmenu イベントを使用して、右クリックのデフォルトの動作を変更します。これは、ユーザーが Web ページ上で右クリックしたときにこの関数を呼び出します。

デフォルトのコンテキスト メニューの非表示を防ぐデフォルトの動作の実際の実装について説明します。

＃＃＃ステップ＃＃＃

ステップ 1
• -最初のステップでは、HTML ドキュメントを作成し、コードをテストするための Web ページを作成します。

ステップ 2
• - このステップでは、Web ページ全体を右クリックするとメニューがポップアップするため、HTML ドキュメントに oncontextmenu イベントを追加します。

ステップ 3
• - 最後のステップでは、デフォルトのコンテキスト メニューがポップアップしないようにするために、preventDefault() メソッドまたは return false; ステートメントを使用して JavaScript 関数を定義します。

  ＃＃＃例＃＃＃

  次の例は、デフォルトのコンテキスト メニューのデフォルトの動作を変更し、それを非表示にする方法を示しています-
リーリー

上の例では、

preventDefault()

メソッドを使用して関数を割り当てることで、ページを右クリックしたときにデフォルトのコンテキスト メニュー機能を削除または非表示にする方法を示しました。

カスタム コンテキスト メニューを追加し、ページを右クリックしたときに表示されるようにする方法を理解しましょう。

＃＃＃ステップ＃＃＃

ステップ 1

- 最初のステップでは、コンテキスト メニューに表示し、表示し続ける必要がある項目のリストを作成します: なし。デフォルトでは、右クリックのみです。ページをクリックしてご覧ください。

• ステップ 2 - 次のステップでは、 要素を使用して、内部 CSS の要求に応じてリストのスタイルを設定します。

• ステップ 3 - 最後のステップでは、カスタム メニューに JavaScript 機能を追加して、ユーザーがページを右クリックした後に Web ページに表示します。

＃＃＃例＃＃＃
• 次の例では、デフォルトのコンテキスト メニューが表示されないようにする方法と、カスタム コンテキスト メニューを追加して表示する方法を示します。 -

  リーリー この例では、デフォルトのコンテキスト メニューを非表示にし、ページを右クリックすると、クリックされたカーソルの位置に独自に作成したコンテキスト メニューを表示します。 ＃＃＃＃＃＃結論は＃＃＃ この記事では、Web ページを右クリックしたときにデフォルトのコンテキスト値を削除または非表示にし、同じアクションで独自のカスタム コンテキスト メニューを表示する方法を学びました。このようにして、表示したいオプションを含むカスタム コンテキスト メニューを追加できます。

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