質問編集履歴

6

問題点解決ソースコード

2022/06/29 12:33

投稿

minami0703
minami0703

スコア6

test CHANGED
File without changes
test CHANGED
@@ -67,7 +67,7 @@
67
67
  一度目の右クリックからcontextmenu1を表示させたいのですが、どのようなソースコードを書けばよいかご教授お願いいたします。
68
68
  ### 該当ソースコード
69
69
  ```ここに言語を入力
70
- <script type="text/javascript">
70
+ <script type="text/javascript">
71
71
  let menu = document.getElementById('menu');
72
72
  let japan = document.getElementsByClassName('japan');
73
73
  let food = document.getElementsByClassName('food');
@@ -77,17 +77,29 @@
77
77
  window.onload = function () {
78
78
 
79
79
  menu.addEventListener('contextmenu', function (e) {
80
+
80
-
81
+ if (e.srcElement.className === "food") {
81
- conme1.style.left = e.pageX + "px";//メニューをマウスの位置へ移動
82
+ conme1.style.left = e.pageX + "px";//メニューをマウスの位置へ移動
82
- conme1.style.top = e.pageY + "px";
83
+ conme1.style.top = e.pageY + "px";
83
- conme1.style.display = "block";//メニューを表示
84
+ conme1.style.display = "block";//メニューを表示
84
- conme2.style.display = "none";
85
+ conme2.style.display = "none";
86
+
85
-
87
+ } else {
88
+ conme1.style.display = "none";
89
+ conme2.style.left = e.pageX + "px";//メニューをマウスの位置へ移動
90
+ conme2.style.top = e.pageY + "px";
91
+ conme2.style.display = "block";//メニューを表示
92
+ }
93
+ document.body.addEventListener('click', function (e) {//body要素をクリックしたときにイベントを発生
86
- if (e.srcElement.className === "food") {//class=foodの場合
94
+ conme1.style.display = "none";//右クリックメニューを非表示
95
+ conme2.style.display = "none";
96
+ });
97
+
98
+ });
99
+
87
-                           for (let i = 0; i < food.length; i++) {
100
+ for (let i = 0; i < food.length; i++) {
88
-
89
- food[i].addEventListener('contextmenu', function (e) {//右クリックイベントを追加
101
+ food[i].addEventListener('contextmenu', function (e) {//右クリックイベントを追加
90
-
102
+
91
103
  document.getElementById("tokyo").onclick = function () {
92
104
  alert("東京の" + food[i].innerHTML + "です");
93
105
  }
@@ -98,20 +110,9 @@
98
110
  alert("名古屋の" + food[i].innerHTML + "です");
99
111
  }
100
112
  });
101
- }
102
- } else {
103
- conme1.style.display = "none";
104
- conme2.style.left = e.pageX + "px";//メニューをマウスの位置へ移動
105
- conme2.style.top = e.pageY + "px";
106
- conme2.style.display = "block";//メニューを表示
107
113
  }
108
- document.body.addEventListener('click', function (e) {//body要素をクリックしたときに非表示
109
- conme1.style.display = "none";//右クリックメニューを非表示
110
- conme2.style.display = "none";
111
- });
112
-
113
- });
114
- }
114
+ }
115
+
115
116
  </script>
116
117
  ```
117
118
 

5

ソースコード(javascript)を書き換えました。

2022/06/27 16:05

投稿

minami0703
minami0703

スコア6

test CHANGED
File without changes
test CHANGED
@@ -75,31 +75,42 @@
75
75
  let conme2 = document.getElementById('contextmenu2');
76
76
 
77
77
  window.onload = function () {
78
- for (let i = 0; i < japan.length; i++) {
79
78
 
80
- menu.addEventListener('contextmenu', function (e) {//menu上で右クリック
79
+ menu.addEventListener('contextmenu', function (e) {
81
-
82
- if (e.srcElement.className === "food") {//class=foodの場合に実行
80
+
83
-
84
- food[i].addEventListener('contextmenu', function (e) {//food上で右クリックイベントを追加
85
81
  conme1.style.left = e.pageX + "px";//メニューをマウスの位置へ移動
86
82
  conme1.style.top = e.pageY + "px";
87
- conme1.style.display = "block";
83
+ conme1.style.display = "block";//メニューを表示
88
84
  conme2.style.display = "none";
85
+
86
+ if (e.srcElement.className === "food") {//class=foodの場合
87
+                           for (let i = 0; i < food.length; i++) {
88
+
89
+ food[i].addEventListener('contextmenu', function (e) {//右クリックイベントを追加
90
+
91
+ document.getElementById("tokyo").onclick = function () {
92
+ alert("東京の" + food[i].innerHTML + "です");
93
+ }
94
+ document.getElementById("osaka").onclick = function () {
95
+ alert("大阪の" + food[i].innerHTML + "です");
96
+ }
97
+ document.getElementById("nagoya").onclick = function () {
98
+ alert("名古屋の" + food[i].innerHTML + "です");
99
+ }
89
100
  });
101
+ }
90
- } else {//food以外
102
+ } else {
91
103
  conme1.style.display = "none";
92
104
  conme2.style.left = e.pageX + "px";//メニューをマウスの位置へ移動
93
105
  conme2.style.top = e.pageY + "px";
94
- conme2.style.display = "block";
106
+ conme2.style.display = "block";//メニューを表示
95
107
  }
96
- document.body.addEventListener('click', function (e) {//body要素をクリックしたときに非表示にする
108
+ document.body.addEventListener('click', function (e) {//body要素をクリックしたときに非表示
97
- conme1.style.display = "none";
109
+ conme1.style.display = "none";//右クリックメニューを非表示
98
110
  conme2.style.display = "none";
99
111
  });
100
112
 
101
113
  });
102
- }
103
114
  }
104
115
  </script>
105
116
  ```

4

タイトル修正

2022/06/25 14:55

投稿

minami0703
minami0703

スコア6

test CHANGED
@@ -1 +1 @@
1
- addEventListenerにより発したcontextmenuが一度目の右クリックで表示されない
1
+ addEventListenerにより発したcontextmenuが一度目の右クリックで表示されない
test CHANGED
File without changes

3

タイトル修正

2022/06/25 14:48

投稿

minami0703
minami0703

スコア6

test CHANGED
@@ -1 +1 @@
1
- addEventListenerにより発火したcontextmenuが一度目で表示されない
1
+ addEventListenerにより発火したcontextmenuが一度目の右クリックで表示されない
test CHANGED
File without changes

2

誤字修正

2022/06/25 14:27

投稿

minami0703
minami0703

スコア6

test CHANGED
File without changes
test CHANGED
@@ -63,7 +63,7 @@
63
63
  </body>
64
64
  ```
65
65
  この中のid属性のcontextmenu1とcontextmenu2を右クリック表示させたいです。
66
- contextmenu1は class="japan" 上で右クリックした際に、contextmenu2 はそれ以外の場所(id="menu"内)で右クリックした際に表示させたいのですが、下記ソースコードではclass="japan"リンク上で右クリックすると、一度目は表示されず、二度目から表示されてしまいます。
66
+ contextmenu1は class="japan" 上で右クリックした際に、contextmenu2 はそれ以外の場所(id="menu"内)で右クリックした際に表示させたいのですが、下記ソースコードではclass="japan"リンク上で右クリックすると、contextmenu1が一度目は表示されず、二度目の右クリックから表示されてしまいます。
67
67
  一度目の右クリックからcontextmenu1を表示させたいのですが、どのようなソースコードを書けばよいかご教授お願いいたします。
68
68
  ### 該当ソースコード
69
69
  ```ここに言語を入力

1

誤字を変更いたしました

2022/06/25 14:13

投稿

minami0703
minami0703

スコア6

test CHANGED
@@ -1 +1 @@
1
- addEventListenerにより発火したcontextmenuが一度目表示されない
1
+ addEventListenerにより発火したcontextmenuが一度目表示されない
test CHANGED
File without changes