自作メニューをクリックする効果を実現するJavaScript
|
この記事では、自作メニューをクリックする効果を実現するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 適用シナリオ:ユーザーが右クリックしたときにデフォルトのブラウザ メニューがポップアップ表示されないようにするには、ブラウザがデフォルトの動作を行わないようにして、目的の効果を実行する必要があります。 最初の方法は要素を作成することです
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
<スタイル>
体 {
高さ: 3000ピクセル;
}
.メニュー{
幅: 100ピクセル;
高さ: 280px;
背景色: 赤;
位置: 絶対;
左: 0;
上: 0;
表示: なし;
}
</スタイル>
</head>
<本文>
<スクリプト>
var Bon = true;
var メニュー = null;
document.oncontextmenu = 関数(イベント) {
if (ボン) {
メニュー = document.createElement("div");
menu.classList.add("メニュー");
document.body.appendChild(メニュー);
menu.style.left = event.pageX + "px";
menu.style.top = event.pageY + "px";
menu.style.display = "ブロック";
Bon = 偽;
イベントをデフォルトにしない();
} それ以外 {
menu.style.left = event.pageX + "px";
menu.style.top = event.pageY + "px";
イベントをデフォルトにしない();
}
}
document.onmousedown = 関数(e) {
e.button == 0の場合{
var menu = document.querySelector(".menu");
document.body.removeChild(メニュー);
Bon = 真;
}
}
</スクリプト>
</本文>
</html>2番目の方法：要素を非表示にする
<div class="メニュー"></div>
<スクリプト>
var menu = document.querySelector(".menu");
document.oncontextmenu = 関数(イベント) {
menu.style.left = event.pageX + "px";
menu.style.top = event.pageY + "px";
menu.style.display = "ブロック";
イベントをデフォルトにしない();
}
document.onmousedown = 関数(e) {
e.button == 0の場合{
menu.style.display = "なし";
}
}
</スクリプト>右クリックすると、デフォルトのメニューはポップアップ表示されず、私が設定した赤いボックスがポップアップ表示されます。
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: シェルスクリプトを使用したMySQLデータベースの自動バックアップ
>>: Linux でユーザーを完全に削除する 2 つの方法
![Win10 + Ubuntu 16.04 デュアルシステム 完璧なインストールチュートリアル [詳細]](/upload/images/67cae089e0274.webp)
推薦する
JavaScript/TypeScript で同時リクエスト制御を実装するためのサンプルコード
シナリオリクエストが 10 件あるが、同時リクエストの最大数は 5 件で、リクエスト結果が必要である...
開発をスピードアップできる VueUse ライブラリ 5 つ (まとめ)
目次VueUse にはどのようなユーティリティがありますか? VueUseをVueプロジェクトにイン...
Tomcatのデフォルトプログラム公開パスの使用と変更についての説明
tomcat7 のデフォルトのプログラム公開パスは tomcat/webapps/ROOT/ です。...
MySQLがbinlogファイルを手動で登録し、マスタースレーブ異常を引き起こす理由
1. 問題の原因友人の @水米田 から、POSITION に基づくマスタースレーブについて質問があり...
uniapp は日付と時刻の選択機能を実装します
この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...
Vueはツリーテーブルを実装する
この記事では、ツリーテーブルを実装するためのVueの具体的なコードを例として紹介します。具体的な内容...
プロファイルを使用して遅い SQL を分析する MySQL の詳細な説明 (グループ左結合はサブクエリよりも効率的です)
プロファイルを使用して遅いSQLを分析するMySQL の SQL パフォーマンス アナライザーの主な...
js は axios 制限リクエスト キューを実装します
目次背景は次のとおりです。何が起こるでしょうか?背景は次のとおりです。実際の開発では、ネットワークの...
Vue3 (III) ウェブサイトホームページレイアウト開発
目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...
ウェブデザインでテキストのサイズを合わせる方法: 小さなテキスト、大きな体験
iPadなどのモバイル端末の普及により、人々がモバイル端末で読書に費やす時間はますます長くなり、読...
MySQL 8.0.16 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 8.0.16圧縮パッケージのインストールと設定方法を参考までに紹介します。...
uniapp アプレットでウォーターフォール フロー レイアウトを実装するためのアイデアとコード
1. はじめに今、ウォーターフォールフローについて書くことは、古い内容の焼き直しと見なされますか?気...
CSS のみを使用して折りたたまれたヘッダー効果を作成する方法の例コード
折りたたまれたヘッダーは、特別オファーや重要なお知らせなど、ユーザーにとって重要な情報を表示するのに...
Vue の下部ナビゲーション バー TabBar を実装するための非常に詳細なチュートリアル
目次プロジェクト紹介:プロジェクトディレクトリ: TabBar 効果のプレビュー: TabBar 実...
Linux サーバー上で nvidia-docker 環境を設定するプロセスの詳細な説明
Docker はコンテナに相当し、必要な動作環境に応じて対応する動作環境を構築できます。このとき、各...