自作メニューをクリックする効果を実現する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 つの方法
推薦する
MySQL マルチバージョン同時実行制御 MVCC の詳細な研究
MVCC MVCC (Multi-Version Concurrency Control) は、マル...
dockerでビルドしたnacos1.3.0の実装
1. nacosデータベースを再開します。データベース名nacos_configユーザー名とパスワー...
HTML ファイルにファイルの内容を含める方法の概要
フォーラムでは、ネットユーザーから「HTML ファイル内の別の HTML ファイルの内容を読み取るこ...
HTML でのアンカーポイントの適用
アンカーポイントの設定<a name="トップ"></a>...
Vueはデジタル千単位区切り形式をグローバルに実装します
この記事の例では、Vue がデジタル 3 桁区切り形式をグローバルに実装するための具体的なコードを参...
デザイナーはコーディングを学ぶ必要がありますか?
多くの場合、 Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼ら...
NodeJS は画像テキスト分割を実現します
この記事では、画像テキストセグメンテーションを実装するためのNodeJSの具体的なコードを参考までに...
MySQL ストアド プロシージャの作成と呼び出しの詳細な説明
目次序文ストアドプロシージャ: 1. ストアドプロシージャの作成と呼び出し1. ストアドプロシージャ...
Vue ElementUI で Excel ファイルを手動でサーバーにアップロードする方法の詳細な説明
目次概要プロパティ設定処理ロジック概要具体的な需要シナリオは次のとおりです。 Excel ファイルを...
MYSQLのバックアップデータのスケジュールクリアの特定の操作
1|0 背景プロジェクトの要件により、各月の履歴在庫データをアーカイブしてバックアップする必要があり...
ウィンドウ内のさまざまな距離/スクロール距離の正確な計算の概要
通常、プロジェクト開発では、マージン、位置、座標などを扱う必要があります。悲劇なのは、これらの概念が...
CentOS8.0ネットワーク設定の実装
1. CentOS 7 と CentOS 8 のネットワーク構成の違い: VMware Workst...
MySQLのよくある間違い
NULL 値によると、MySQL の NULL 値は単にデータがないことを意味します。NULL 値は...
IE8ブラウザはWebページ標準に完全互換となる
<br />海外メディアの報道によると、マイクロソフトはソフトウェアの相互運用性への取り...
さまざまな種類の jQuery Web ページ検証コード プラグイン コード例
html <!DOCTYPE html> <html lang="ja&...