自作メニューをクリックする効果を実現する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 つの方法
推薦する
JS ES6 非同期ソリューション
目次最初にコールバック関数を使用するes6 非同期処理モデルこの非同期モデルに合わせたAPI: pr...
Linux カーネル デバイス ドライバー アドレス マッピングに関する注意事項
#include <asm/io.h> #define ioremap(cookie,...
入力要素 [type="file"] を使用する場合のスタイルのカスタマイズとブラウザの互換性の問題に関する議論
この2日間、Baixing.comの筆記試験問題を解いているときに、このような問題に遭遇しました。H...
MySQL btree インデックスとハッシュ インデックスの違い
MySQL では、ほとんどのインデックス (PRIMARY KEY、UNIQUE、INDEX、FUL...
CSS を使用してボックスを水平方向と垂直方向に中央揃えする方法 (8 つの方法)
元のコード: center.html : <!DOCTYPE html> <htm...
MySQLストレージフィールドタイプのクエリ効率についての簡単な理解
検索パフォーマンスは最速から最遅まで次のとおりです (私が聞いたところによると)。 1 番目: ti...
CSS 属性値 clear:right が機能しない理由の詳細
clear プロパティを使用してフロートをクリアすることはよくあることであり、clear プロパティ...
VMware のインストールと使用時の問題と解決策
仮想マシンは使用中であるか、接続できません次のようなエラーが報告された場合解決まずこのページにアクセ...
Javascriptでビルダーパターンを実装する方法
概要ビルダー パターンは比較的単純なデザイン パターンであり、作成パターンに属します。定義: 複雑な...
ネイティブ js が携帯電話のプルダウン更新を模倣
この記事では、携帯電話のプルダウンリフレッシュを模倣したjsの具体的なコードを参考までに共有します。...
mysql5.7.18 解凍バージョンで mysql サービスを起動します
mysql5.7.18の解凍版はmysqlサービスを起動します。具体的な内容は以下のとおりです。 1...
デザインスキルを向上させる良い方法
いわゆる才能（左脳と右脳）つまり、芸術的な才能があるかどうかは、人間の左脳と右脳の分業によって主に決...
SQLと各種NoSQLデータベースの使用シナリオの説明
SQL はメイントランクです。なぜ私はこのように理解するのでしょうか。技術的な観点からリレーショナル...
ホバードロップダウンメニューを実装するためのネイティブJS
JS はホバー ドロップダウン メニューを実装します。これは、フロントエンドの面接で遭遇するシナリ...
雨滴効果を実現する JavaScript キャンバス
この記事の例では、雨滴効果を実現するためのキャンバスの具体的なコードを参考までに共有しています。具体...