この記事の例では、参考のためにjsカスタム右クリックメニューの具体的なコードを共有しています。具体的な内容は次のとおりです。 1. 右クリックメニューの起動の基本プロセス カスタム右クリック メニューを実装するには、まず次のことを理解する必要があります。 ブラウザのデフォルトの右クリックメニューを起動する基本的なプロセス 1) 右クリックするとメニューが表示されます 上記は大まかな実装プロセスであり、包括的なものではなく、参考用です。 テキストは抽象的すぎるかもしれませんので、コードを見てみましょう。 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Centos7でmysql6の初期化インストールパスワードをインストールする方法
>>: Nginx ポート競合を解決するトラブルシューティング方法の例
<tbody> タグは、テーブル本体のスタイルを定義するために使用されます。基本構文 &...
この記事では、MySQL 8.0.12のインストールチュートリアルを参考までに紹介します。具体的な内...
1. mysqlエクスポートファイル: SELECT `pe2e_user_to_company`....
この記事は主にMysqlの複数データベースのバックアップのコード例を紹介します。この記事ではサンプル...
目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...
序文mysql モジュール (プロジェクト アドレスは https://github.com/mys...
この記事では、MySQL 5.6.37のダウンロード、インストール、設定のチュートリアルを参考までに...
目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...
問題の説明:デスクトップ コンピューターとキャンパス ネットワークを使用して、有線モードでインターネ...
この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...
MySQL では、テーブルに複数のインデックスを指定できますが、ステートメントの実行時に、使用するイ...
最近VScodeのリモート開発機能をいじっています。Dockerのコンテナに接続できるほか、WSLに...
序文スタートアップ企業が最初はモノリシック アプリケーションを主要なアーキテクチャとして使用し、通常...
目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...
1. 現在のホスト名を表示する [root@fangjian ~]# ホスト名ctl 静的ホスト名:...