質問編集履歴
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
|
-
|
82
|
+
conme1.style.left = e.pageX + "px";//メニューをマウスの位置へ移動
|
82
|
-
|
83
|
+
conme1.style.top = e.pageY + "px";
|
83
|
-
|
84
|
+
conme1.style.display = "block";//メニューを表示
|
84
|
-
|
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
|
-
|
94
|
+
conme1.style.display = "none";//右クリックメニューを非表示
|
95
|
+
conme2.style.display = "none";
|
96
|
+
});
|
97
|
+
|
98
|
+
});
|
99
|
+
|
87
|
-
|
100
|
+
for (let i = 0; i < food.length; i++) {
|
88
|
-
|
89
|
-
|
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)を書き換えました。
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) {
|
79
|
+
menu.addEventListener('contextmenu', function (e) {
|
81
|
-
|
82
|
-
|
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 {
|
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
タイトル修正
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
addEventListenerにより発
|
1
|
+
addEventListenerにより発生したcontextmenuが一度目の右クリックで表示されない
|
test
CHANGED
File without changes
|
3
タイトル修正
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
addEventListenerにより発火したcontextmenuが一度目で表示されない
|
1
|
+
addEventListenerにより発火したcontextmenuが一度目の右クリックで表示されない
|
test
CHANGED
File without changes
|
2
誤字修正
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
誤字を変更いたしました
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
addEventListenerにより発火したcontextmenuが一度目表示されない
|
1
|
+
addEventListenerにより発火したcontextmenuが一度目で表示されない
|
test
CHANGED
File without changes
|