質問編集履歴
2
レイアウトを修正しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
##実装したいこと
|
|
2
|
+
|
|
3
|
+
[サイト](https://techacademy.jp/magazine/28836)を参考に
|
|
4
|
+
|
|
5
|
+
例えば卵焼き上で右クリックしたらオリジナルのメニューが出て、wikipediaとcookpadを選べ、どちらかを選ぶと卵焼きの各そのリンクに飛ぶ
|
|
6
|
+
|
|
7
|
+
麻婆豆腐上で右クリックしたらオリジナルのメニューが出て、wikipediaとcookpadを選べ、どちらかを選ぶと麻婆豆腐の各そのリンクに飛ぶ
|
|
8
|
+
|
|
9
|
+
というシステムを作りたかったので、悩んでいる部分が解決できれば麻婆豆腐・唐揚げとコピペで半ば強制的に実装することは可能だと思うのですが、どのようにすればいいでしょうか。
|
|
10
|
+
|
|
11
|
+
##悩んでいる部分
|
|
12
|
+
|
|
13
|
+
**document.getElementById("main").addEventListener**で卵焼き、麻婆豆腐、唐揚げ上で右クリックするとメニューが出現したため、
|
|
14
|
+
|
|
15
|
+
じゃmainの子要素であるcook1クラスを指定すればいいんだと思い**document.getElementById("main").getElementsByClassName('cook1').**を記述したところメニューが出現しなくなりました。どうしてなのでしょうか、mainの子要素であるcook1クラスを指定するという考えが間違えているのでしょうか。
|
|
16
|
+
|
|
17
|
+
##コード
|
|
18
|
+
|
|
1
19
|
```html
|
|
2
20
|
|
|
3
21
|
<!DOCTYPE html>
|
|
@@ -109,19 +127,3 @@
|
|
|
109
127
|
</html>
|
|
110
128
|
|
|
111
129
|
```
|
|
112
|
-
|
|
113
|
-
[サイト](https://techacademy.jp/magazine/28836)を参考に
|
|
114
|
-
|
|
115
|
-
例えば卵焼き上で右クリックしたらオリジナルのメニューが出て、wikipediaとcookpadを選べ、どちらかを選ぶと卵焼きの各そのリンクに飛ぶ
|
|
116
|
-
|
|
117
|
-
麻婆豆腐上で右クリックしたらオリジナルのメニューが出て、wikipediaとcookpadを選べ、どちらかを選ぶと麻婆豆腐の各そのリンクに飛ぶ
|
|
118
|
-
|
|
119
|
-
というシステムを作りたかったのですが、どのように実装したらいいか分からず質問させていただきました。
|
|
120
|
-
|
|
121
|
-
追記
|
|
122
|
-
|
|
123
|
-
**document.getElementById("main").addEventListener**で卵焼き、麻婆豆腐、唐揚げ上で右クリックするとメニューが出現したため、
|
|
124
|
-
|
|
125
|
-
じゃmainの子要素であるcook1クラスを指定すればいいんだと思い**document.getElementById("main").getElementsByClassName('cook1').**を記述したところメニューが出現しなくなりました。どうしてなのでしょうか、mainの子要素であるcook1クラスを指定するという考えが間違えているのでしょうか。
|
|
126
|
-
|
|
127
|
-
https://techacademy.jp/magazine/28836
|
1
どこで理解が詰まっているのかについて修正しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,48 +1,116 @@
|
|
|
1
|
-
```
|
|
1
|
+
```html
|
|
2
2
|
|
|
3
3
|
<!DOCTYPE html>
|
|
4
4
|
|
|
5
|
-
<ht
|
|
5
|
+
<meta http-equiv="content-type" charset="utf-8">
|
|
6
6
|
|
|
7
|
-
<h
|
|
7
|
+
<html>
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
<head>
|
|
10
10
|
|
|
11
|
-
<title>
|
|
11
|
+
<title>JavaScriptでオリジナルの右クリックメニューを作成する方法</title>
|
|
12
12
|
|
|
13
|
-
<
|
|
13
|
+
<style>
|
|
14
14
|
|
|
15
|
+
#contextmenu{
|
|
16
|
+
|
|
17
|
+
display:none;
|
|
18
|
+
|
|
19
|
+
position:fixed;
|
|
20
|
+
|
|
21
|
+
left:0px;
|
|
22
|
+
|
|
23
|
+
top:0px;
|
|
24
|
+
|
|
25
|
+
width:200px;
|
|
26
|
+
|
|
27
|
+
height:100px;
|
|
28
|
+
|
|
29
|
+
border:1px solid #000;
|
|
30
|
+
|
|
31
|
+
background-color:#fff;
|
|
32
|
+
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
#contextmenu li{
|
|
36
|
+
|
|
37
|
+
cursor:pointer;
|
|
38
|
+
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
</style>
|
|
42
|
+
|
|
43
|
+
</head>
|
|
44
|
+
|
|
45
|
+
<body onContextmenu="return false;">
|
|
46
|
+
|
|
47
|
+
<div id="main">
|
|
48
|
+
|
|
49
|
+
<p class="cook1">卵焼き</p>
|
|
50
|
+
|
|
51
|
+
<p class="cook2">麻婆豆腐</p>
|
|
52
|
+
|
|
53
|
+
<p class="cook3">唐揚げ</p>
|
|
54
|
+
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<div id="contextmenu">
|
|
58
|
+
|
|
59
|
+
<ul>
|
|
60
|
+
|
|
61
|
+
<li onClick="menu1()">1.Wikipedia</li>
|
|
62
|
+
|
|
63
|
+
<li onClick="menu2()">2.cookpad</li>
|
|
64
|
+
|
|
65
|
+
</ul>
|
|
66
|
+
|
|
67
|
+
</div>
|
|
68
|
+
|
|
15
|
-
|
|
69
|
+
<script>
|
|
70
|
+
|
|
71
|
+
window.onload = function(){
|
|
72
|
+
|
|
73
|
+
document.getElementById("main").getElementsByClassName('cook1').addEventListener('contextmenu',function (e){
|
|
74
|
+
|
|
75
|
+
document.getElementById('contextmenu').style.left=e.pageX+"px";
|
|
76
|
+
|
|
77
|
+
document.getElementById('contextmenu').style.top=e.pageY+"px";
|
|
78
|
+
|
|
79
|
+
document.getElementById('contextmenu').style.display="block";
|
|
80
|
+
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
document.body.addEventListener('click',function (e){
|
|
84
|
+
|
|
85
|
+
document.getElementById('contextmenu').style.display="none";
|
|
86
|
+
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
function menu1(){
|
|
92
|
+
|
|
93
|
+
open( "url", "_blank" ) ;
|
|
94
|
+
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
function menu2(){
|
|
98
|
+
|
|
99
|
+
open( "url", "_blank" ) ;
|
|
100
|
+
|
|
101
|
+
}
|
|
16
102
|
|
|
17
103
|
|
|
18
104
|
|
|
19
105
|
</script>
|
|
20
106
|
|
|
21
|
-
</head>
|
|
22
|
-
|
|
23
|
-
<body>
|
|
24
|
-
|
|
25
|
-
<div id="contextmenu">
|
|
26
|
-
|
|
27
|
-
<ul>
|
|
28
|
-
|
|
29
|
-
<li onClick="cook1()">卵焼き</li>
|
|
30
|
-
|
|
31
|
-
<li onClick="cook2()">麻婆豆腐</li>
|
|
32
|
-
|
|
33
|
-
<li onClick="cook3()">唐揚げ</li>
|
|
34
|
-
|
|
35
|
-
</ul>
|
|
36
|
-
|
|
37
|
-
</div>
|
|
38
|
-
|
|
39
|
-
</body>
|
|
107
|
+
</body>
|
|
40
108
|
|
|
41
109
|
</html>
|
|
42
110
|
|
|
43
111
|
```
|
|
44
112
|
|
|
45
|
-
|
|
113
|
+
[サイト](https://techacademy.jp/magazine/28836)を参考に
|
|
46
114
|
|
|
47
115
|
例えば卵焼き上で右クリックしたらオリジナルのメニューが出て、wikipediaとcookpadを選べ、どちらかを選ぶと卵焼きの各そのリンクに飛ぶ
|
|
48
116
|
|
|
@@ -50,4 +118,10 @@
|
|
|
50
118
|
|
|
51
119
|
というシステムを作りたかったのですが、どのように実装したらいいか分からず質問させていただきました。
|
|
52
120
|
|
|
121
|
+
追記
|
|
122
|
+
|
|
123
|
+
**document.getElementById("main").addEventListener**で卵焼き、麻婆豆腐、唐揚げ上で右クリックするとメニューが出現したため、
|
|
124
|
+
|
|
125
|
+
じゃmainの子要素であるcook1クラスを指定すればいいんだと思い**document.getElementById("main").getElementsByClassName('cook1').**を記述したところメニューが出現しなくなりました。どうしてなのでしょうか、mainの子要素であるcook1クラスを指定するという考えが間違えているのでしょうか。
|
|
126
|
+
|
|
53
127
|
https://techacademy.jp/magazine/28836
|