自作メニューをクリックする効果を実現する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 つの方法
推薦する
Webデザインの経験: Webコードを効率的に書く
本来、この第 7 章では、デザインにおけるレイヤーと空間テクニックについて深く議論するはずです。しか...
MySQL データを誤って削除した場合の簡単な解決策 (MySQL フラッシュバック ツール)
概要Binlog2sql は、Python で開発されたオープンソースの MySQL Binlog ...
Workbench を介して MySQL データベースにリモートでアクセスする方法の詳細な説明
序文Workbench が 1 台のコンピューターにインストールされており、別の Ubuntu サー...
MySQL インデックスの長所と短所、およびインデックス作成のガイドライン
1. インデックスを作成する理由（メリット）インデックスを作成するとシステムのパフォーマンスが大幅に...
デザイン参考 WordPressウェブサイト構築成功事例
これら 16 のサイトはそれぞれ注意深く読む価値があり、どのサイトでも推奨されている Web サイト...
ブラウザがクロージャをどのように認識するかについて詳しく説明します
目次序文クロージャの紹介メモリのゴミを識別する方法クロージャのメモリ表現結論序文クロージャは、Jav...
HTMLは入力完了を検出する機能を実装する
入力が進行中かどうかを検出するには、「onInput(event)」を使用しますコンテンツが変更され...
コード標準では、SQL ステートメントに結合が多すぎないようにする必要があるのはなぜですか?
無料ポイントインタビュアー：Linuxを使ったことはありますか？私：はいインタビュアー：メモリ使用量...
単純なCSSの詳細に惚れ込むと、重要ではないものの、効率性が向上する可能性がある
CSS の将来は非常に楽しみです。一方では、まったく新しいページ レイアウト方法であり、他方では、ク...
Nginx http ヘルスチェック構成プロセス分析
パッシブチェックパッシブ ヘルス チェックでは、NGINX と NGINX Plus はイベントの発...
Tomcat が応答データグラムを書き戻すタイミングの詳細な分析
疑問が生じるこの質問は、ファイルのダウンロードを記述しているときに発生しました。HttpServle...
Linux ファイル管理コマンド例の分析 [権限、作成、削除、コピー、移動、検索など]
この記事では、Linux ファイル管理コマンドについて例を挙げて説明します。ご参考までに、詳細は以下...
よく使用される HTML メタタグ属性 (Web サイトの互換性と最適化に必要)
元の URL: http://segmentfault.com/blog/ciaocc/119000...
Reactは、読み込み、読み込み完了、読み込み失敗の3つの段階の原則分析を実装します。
最近ブログに書いたのですが、プロジェクトリストの中に写真がたくさんあり、最初は読み込みが遅いので、ス...
HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例
1. スクリプトを動的に読み込むウェブサイトの需要が高まるにつれて、スクリプトの需要も徐々に増加しま...