ネイティブ js カスタム右クリック メニュー

ネイティブ js カスタム右クリック メニュー

この記事の例では、参考のためにjsカスタム右クリックメニューの具体的なコードを共有しています。具体的な内容は次のとおりです。

1. 右クリックメニューの起動の基本プロセス

カスタム右クリック メニューを実装するには、まず次のことを理解する必要があります。

ブラウザのデフォルトの右クリックメニューを起動する基本的なプロセス

1) 右クリックするとメニューが表示されます
2) メニューが表示され、マウスの矢印は常にメニューの左上隅にあります。
3) 別の場所で右ボタンをクリックすると、元のメニューが消え、指定した場所に新しいメニューが表示されます。
4) 左ボタンまたは中央ボタンをクリックすると、メニューが消えます。

上記は大まかな実装プロセスであり、包括的なものではなく、参考用です。

テキストは抽象的すぎるかもしれませんので、コードを見てみましょう。

2. HTML構造

<!--スタートの右クリック メニューの構造-->
<div id="右メニュー" class="右メニュー">
 <ul>
  <li disabled="無効">
        <a href="#" >戻る (B)</a> 
        <span>Alt+左矢印</span></li>
  <li><a href="#" >進む (F)</a> <span>Alt+右矢印</span></li>
  <li><a href="#" >再読み込み (R)</a> <span>Ctrl+R</span></li>
 </ul>
 <ul>
  <li><a href="#" >名前を付けて保存 (A)...</a> <span>Ctrl+S</span></li>
        <li><a href="#" >印刷(P)..</a> <span>Ctrl+P</span></li>
  <li><a href="#" >プロジェクト (C)...</a> <span>Ctrl+R</span></li>
 </ul>
 <ul>
  <li><a href="#" >クソコードを表示 (V)</a> <span>Ctrl+U</span></li>
     <li><a href="#" >バカをチェック(N)</a> <span>Ctrl+Shift+L</span></li>
 </ul>
</div>
<!--右クリック メニューの構造の終了-->
  
<div class="box"></div>

3. CSSスタイル

*{
 マージン: 0;
 パディング: 0;
}
li{
 リストスタイル: なし;
}
.右メニュー{
 幅: 250ピクセル;
 背景: #fff;
 境界線: 1px 実線 #bababa;
 位置: 固定;
 ボックスのサイズ: 境界線ボックス;
 表示: なし;
}
.rightmenu ul{
 下境界線: 1px 実線 #e9e9e9;   
}
.rightmenu ul li{
 高さ: 30px;
 行の高さ: 30px;
 色: #000;
 パディング: 0 25px;
 ボックスのサイズ: 境界線ボックス;
 マージン: 2px 0;
     カーソル: デフォルト;
}
.rightmenu ul li:hover{
 背景: #ebebeb;
}
.rightmenu ul li a{
 フォントサイズ: 12px;
 色: #000;
 カーソル: デフォルト;
 テキスト装飾: なし;
}
.rightmenu ul li span{
 フロート: 右;
 フォントサイズ: 12px;
 色: #000;
}
。箱{
 幅: 100ピクセル;
 高さ: 100px;
 背景: 赤;
}

.rightmenu は、右クリック メニュー自体は非表示で、クリックされたときにのみ表示されるため、display:none を設定します。この文を追加しないと、メニューはページの左上隅に表示されます。

3. js実装プロセス

分析:

①: ブラウザ自体に右クリックメニューがあり、右クリックメニューも作成したいので、ブラウザの右クリックを禁止する必要があります。ここでは、デフォルトイベントを禁止する機能を持つpreventDefault()を使用できます。デフォルトイベントとは何かを学びましょう。

たとえば、クリックすると Baidu にジャンプできることがわかります。そのため、ジャンプ時間があります。このイベントを実装するために js を使用しませんでした。これはデフォルトであるため、デフォルト イベントと呼ばれます。同様に、ブラウザの右クリック メニューです。

② 先ほど、メニューが表示されると、マウスの矢印は常にメニューの左上隅にあると言いました。これはどのように実現されているのでしょうか。これには、イベント内のイベントの座標が関係しています。クリックした位置は、右クリックイベントが発生した位置です。この位置は、座標、clientX(イベント発生点の位置と可視領域)、offsetX(イベント発生点の位置と親要素)、pageX(イベント発生点の位置とページ)、screenX(イベント発生点の位置と画面)で説明できます。ここでoffsetX / Yを使用するのは、BOWでクリックしているためです。具体的な理由は、Baiduで検索するとわかります。詳しくマークされているコードを見てみましょう。

<スクリプト>
 document.addEventListener('DOMContentLoaded',function(){
 //取得 var rightMenu=document.getElementById('rightmenu');
 //1. まず、右ボタンのデフォルトの動作をオフにします。window.oncontextmenu=function(event){
  イベントをデフォルトにしない();
  //2. 右クリックの動作を設定する rightMenu.style.display="none"; //ブロックされたメニューをリセットする rightMenu.style.display="block";
  rightMenu.style.left=event.offsetX+'px';
   rightMenu.style.top=event.offsetY+'px';
  }
  //3. 実際のブラウザの右ボタンに合わせて、左ボタンで右クリックメニューをキャンセルできます document.onclick=function(event){
   rightMenu.style.display="なし";
  }
  //4. この関数は完璧ではなく、各 li に対して BOM イベントを記述する必要がありますが、ここでは今のところ記述していません //5. 注意深く確認すると、定義した右クリック メニューに右ボタンがある場合、小さな問題があることがわかります。自分でテストできます})
</スクリプト>

上記は参考用です。同様の原理に基づいて、さらに多くの機能が実装されています。以上です。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jsはページのコピー機能を禁止し、ページの右クリックメニューを無効にしますサンプルコード
  • 右クリックメニュー機能を実装するためのjs
  • ExtJs グリッド行の右クリック メニューの 2 つの方法
  • JavaScriptは任意の要素に対してカスタム右クリックメニューを実装します
  • js 右クリックメニュー効果コード
  • JavaScriptとJQueryがWebページの右クリックメニューをブロックし、コピーの選択を禁止することについての詳細な議論
  • JSコンポーネントBootstrap ContextMenuの右クリックメニューの使い方
  • jsはマウスの右クリックメニューの貼り付けイベントをキャプチャしてコードを実装します
  • js 右クリック メニュー、異なるオブジェクトごとに異なるメニューをサポート (IE および Firefox と互換性あり)
  • JS は Windows7 スタイルの Web 右クリック メニュー効果コードを実装します

<<:  Centos7でmysql6の初期化インストールパスワードをインストールする方法

>>:  Nginx ポート競合を解決するトラブルシューティング方法の例

推薦する

HTML テーブルタグチュートリアル (45): テーブル本体タグ

<tbody> タグは、テーブル本体のスタイルを定義するために使用されます。基本構文 &...

MySQL 8.0.12 簡単インストールチュートリアル

この記事では、MySQL 8.0.12のインストールチュートリアルを参考までに紹介します。具体的な内...

MySQL の一般的な SQL ステートメントの概要

1. mysqlエクスポートファイル: SELECT `pe2e_user_to_company`....

Mysql 複数データベースのバックアップ コード例

この記事は主にMysqlの複数データベースのバックアップのコード例を紹介します。この記事ではサンプル...

任意の長さの配列を作成または埋めるための JS のヒントの要約

目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...

Node.js mysqlクライアントが認証プロトコルをサポートしていない問題を解決する

序文mysql モジュール (プロジェクト アドレスは https://github.com/mys...

MySQL 5.6.37 (zip) ダウンロード インストール 構成 グラフィック チュートリアル

この記事では、MySQL 5.6.37のダウンロード、インストール、設定のチュートリアルを参考までに...

フロントエンドJavaScript ES6の詳細について

目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...

Ubuntuがインターネットに接続できない場合の解決策

問題の説明:デスクトップ コンピューターとキャンパス ネットワークを使用して、有線モードでインターネ...

カルーセル効果を実現するネイティブJavaScript

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

MySQLが間違ったインデックスを選択する理由と解決策

MySQL では、テーブルに複数のインデックスを指定できますが、ステートメントの実行時に、使用するイ...

Docker 経由で wsl の tar ファイルを作成する方法

最近VScodeのリモート開発機能をいじっています。Dockerのコンテナに接続できるほか、WSLに...

MySQL データベースにおける高同時実行性の問題を解決する方法

序文スタートアップ企業が最初はモノリシック アプリケーションを主要なアーキテクチャとして使用し、通常...

JavaScriptのURLオブジェクトとは何かについて話しましょう

目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...

Linuxでホスト名を変更する方法

1. 現在のホスト名を表示する [root@fangjian ~]# ホスト名ctl 静的ホスト名:...