今回はJSでカスタムマウスの右クリックメニューを実装する方法を紹介します。 JSでカスタムマウスの右クリックメニューを実装するための注意点とは何ですか。実際のケースを見てみましょう。
カスタマイズされたマウスの右クリック メニュー要素: ページ上のデフォルトの右クリック イベントを無効にする 右クリック メニューのスタイルとメニューが表示される場所を設定する (メニューの場所は、マウスクリック位置) マウスが指定されたコントロール内にある (その領域を右クリックするとメニューが表示されます) (デフォルトのメニューは非表示になっており、マウスを右クリックすると表示されます) レンダリング
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" type="text/css" href="right-click.css" /> </head> <body> <div id="contain-friend">右击显示菜单</div> <label id="label1"></label> <div id="menu-friend"> <div> <button id="btn1">菜单一</button> </div> <div> <button id="btn2">菜单二</button> </div> </div> <script src="right-click.js"></script> </body> </html>
メニューの配置は主に最初のif文部分にあり、その後に検証ボタンの効果が続きます。 。 メニューの配置にはmenu1.style.leftとmenu1.style.topが使用されています。cssスタイルシートから、menu1のposition属性は絶対配置であり、style.topは相対配置であることがわかります。最も近い位置属性値は静的ではありません。これが本体です。 メニューの位置は、
window.onload = function() { //以下为自定义右击菜单 document.oncontextmenu = function(e) { //阻止执行浏览器默认右击事件 e.preventDefault(); //聊天室好友列表 if (document.getElementById("menu-friend")) { var menu1 = document.getElementById("menu-friend"); menu1.style.display = "block"; document.getElementById("contain-friend").onmousedown = function(e) { //菜单定位 menu1.style.left = e.offsetX + "px"; menu1.style.top = document.documentElement.scrollTop + e.clientY + "px"; //alert(menu1.style.top) if (document.getElementById("contain-friend")) { if (e.button == 2) { menu1.style.visibility = "visible"; } else { menu1.style.visibility = "hidden"; } } } } } if (document.getElementById("btn1")) { document.getElementById("btn1").onmousedown = function(e) { document.getElementById("label1").innerHTML = "你点击了菜单一" } } if (document.getElementById("btn2")) { document.getElementById("btn2").onmousedown = function(e) { document.getElementById("label1").innerHTML = "你点击了菜单二" } } return false; //与e.preventDefault();功能相同,但是必须放在最后否则在return后面的内容均不执行 }
.contain { background-color: #D1CEBC; height: 100px; width: 300px; } .menu { width: 150px; background-color: white; visibility: hidden; position: absolute; box-shadow: 0px 0px 10px #D1CEBC } .menu-item { background-color: #fff; margin: 0; } .menu-item-btn { width: 146px; margin: 2px; border: 0; text-align: left; padding-left: 60px; padding-top: 5px; padding-bottom: 5px; background-color: #fff; color: #000; } .menu-item-btn:hover { background-color: #D1CEBC; }これらの事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングなコンテンツについては、他の内容に注意してください。関連記事は php 中国語 Web サイトにあります。 関連書籍:
HTMLにおけるモバイル端末向けのレイアウトソリューションとは何ですか
以上がカスタムマウスの右クリックメニューをJSで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

マウススクロールイベントの浸透の効果を実現する方法は? Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。

携帯電話でネイティブセレクトを使用する際の潜在的な問題は、モバイルアプリケーションを開発するときに、ボックスを選択する必要があることがよくあります。通常、開発者...

お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか?モバイルデバイスでアプリケーションを開発する場合、適切なUIコンポーネントを選択することが非常に重要です。多くの開発者...

Three.JSとOctreeを使用して、部屋でのサードパーソンローミングの衝突処理を最適化します。 3つのjsでoctreeを使用して、部屋でサードパーソンローミングを実装し、衝突を追加してください...

モバイルデバイスでアプリケーションを開発する際に携帯電話でネイティブセレクトの問題は、ユーザーが選択を行う必要があるシナリオに遭遇することがよくあります。ネイティブセル...

いくつかのWebサイトを閲覧するときにマウススクロールイベントの実装原則を調査すると、マウスがホバリングしているときにページ全体をスクロールすることができることに気付くかもしれません...


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

メモ帳++7.3.1
使いやすく無料のコードエディター

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

ホットトピック









