質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

addEventListenerにより発生したcontextmenuが一度目の右クリックで表示されない

kikumaru0703
minami0703

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

1クリップ

194閲覧

投稿2022/06/25 14:12

編集2022/06/29 21:39

実現したいこと

<style> #contextmenu1 { display: none; position: fixed; left: 0px; top: 0px; width: 200px; height: 180px; border: 1px solid #000; background-color: #fff; border-radius: 5px; } #contextmenu li { cursor: pointer; } #contextmenu2 { display: none; position: fixed; left: 0px; top: 0px; width: 200px; height: 180px; border: 1px solid #000; background-color: #fff; border-radius: 5px; } #contextmenu2 li { cursor: pointer; } </style>
<body onContextmenu="return false;"> <div id="menu" style="width:100px; background-color:bisque; height: 300px;"> <a class="japan" href="#"> <p class="food">焼肉</p> </a> <a class="japan" href="#"> <p class="food">寿司</p> </a> <a class="japan" href="#"> <p class="food">ラーメン</p> </a> </div> <ul id="contextmenu1"> <li>東京</li> <li>大阪</li> <li>名古屋</li> </ul> <ul id="contextmenu2"> <li>アメリカ</li> <li>イギリス</li> <li>フランス</li> </ul> </body>

この中のid属性のcontextmenu1とcontextmenu2を右クリック表示させたいです。
contextmenu1は class="japan" 上で右クリックした際に、contextmenu2 はそれ以外の場所(id="menu"内)で右クリックした際に表示させたいのですが、下記ソースコードではclass="japan"リンク上で右クリックすると、contextmenu1が一度目は表示されず、二度目の右クリックから表示されてしまいます。
一度目の右クリックからcontextmenu1を表示させたいのですが、どのようなソースコードを書けばよいかご教授お願いいたします。

該当ソースコード

<script type="text/javascript"> let menu = document.getElementById('menu'); let japan = document.getElementsByClassName('japan'); let food = document.getElementsByClassName('food'); let conme1 = document.getElementById('contextmenu1'); let conme2 = document.getElementById('contextmenu2'); window.onload = function () { menu.addEventListener('contextmenu', function (e) { if (e.srcElement.className === "food") { conme1.style.left = e.pageX + "px";//メニューをマウスの位置へ移動 conme1.style.top = e.pageY + "px"; conme1.style.display = "block";//メニューを表示 conme2.style.display = "none"; } else { conme1.style.display = "none"; conme2.style.left = e.pageX + "px";//メニューをマウスの位置へ移動 conme2.style.top = e.pageY + "px"; conme2.style.display = "block";//メニューを表示 } document.body.addEventListener('click', function (e) {//body要素をクリックしたときにイベントを発生 conme1.style.display = "none";//右クリックメニューを非表示 conme2.style.display = "none"; }); }); for (let i = 0; i < food.length; i++) { food[i].addEventListener('contextmenu', function (e) {//右クリックイベントを追加 document.getElementById("tokyo").onclick = function () { alert("東京の" + food[i].innerHTML + "です"); } document.getElementById("osaka").onclick = function () { alert("大阪の" + food[i].innerHTML + "です"); } document.getElementById("nagoya").onclick = function () { alert("名古屋の" + food[i].innerHTML + "です"); } }); } } </script>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。