自作メニューをクリックする効果を実現する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 つの方法
推薦する
フレックスレイアウトの互換性の問題の概要
1. W3C バージョンの flex 2009年版フラグ: display: box; または bo...
ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント
ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント。ウェブサイトのアクセス速度...
Centos6.5 glibc アップグレードプロセスの紹介
目次シナリオ要件glibc バージョンglibcのインストールglibc ソフトリンクシナリオ要件C...
CSS フィルターを使用してマウスオーバー効果を記述する例
CSSフィルターを使用してマウスオーバー効果を記述する <div class="fi...
vuexプロジェクトにおけるログインステータス管理の実践プロセス
目次道具：ログインシナリオ:練習する：シナリオ1: 思考と実践シナリオ2: 思考と実践要約する道具：...
ウィンドウとLinuxプロジェクトを展開する際のLinuxファイルパスに問題はありません
長い間ブログを書いていませんでした。先週、プロジェクトをテストしたところ、いくつかのバグが見つかりま...
フォーム送信時に追加のパラメータを渡すためのいくつかの一般的な方法
フォームを送信するときに、送信前に追加のパラメータが追加される状況が発生する場合があります。この問題...
30 種類の無料の高品質英語リボンフォント
30 種類の高品質な英語リボン フォントを無料でダウンロードできます。デザイナーは常に、25 種類の...
初心者向け入門チュートリアル: ドメイン名の解決とバインディング
では、ドメイン名を登録して仮想ホストを購入した後、IE でドメイン名を入力して Web サイトを開く...
Vueはechart円グラフの凡例のパーセンテージを表示するメソッドを実装します
この記事では主に、echart を使用してパーセンテージを表示する Vue の円グラフデータ部分を紹...
ページ内の検索エンジンの呼び出しはBaiduを例に挙げています
今日、突然、自分のウェブページで Google や Baidu のような強力な検索エンジンを呼び出す...
HTML 5 プレビュー
<br />オリジナル: http://www.alistapart.com/artic...
Vueはシンプルなスライダー検証を実装する
この記事の例では、Vueスライダー検証の実装を共有しています。コードは次のとおりです。 <テン...
MySQLのデッドロックとログに関する詳細な説明
最近、MySQL オンラインでいくつかのデータ異常が発生しましたが、すべて早朝に発生しました。ビジネ...
IMG での UserMap の使用例
usemap は <img> タグの属性であり、使用するイメージ マップの名前を指定する...