teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問スマホの時に子要素をclickすると親要素も反応してしまう

編集履歴

質問編集履歴

11

jsの修正。

2018/11/19 10:05

投稿

akiiro_
akiiro_

スコア19

test CHANGED
File without changes
test CHANGED
@@ -68,6 +68,10 @@
68
68
 
69
69
  $('<li class="js-myself-skill-tag-list-item js-sp-myself-skill-tag-list-item-delete">' + skills[i].name + '<span class="profile-edit-add-tag-myself-list-item-delete js-myself-skill-tag-list-item-delete"></span></li>');
70
70
 
71
+
72
+
73
+ $myselfSkillTagList.append(dynamicMyselfTagListItems);
74
+
71
75
  });
72
76
 
73
77
 

10

前提条件の変更。

2018/11/19 10:05

投稿

akiiro_
akiiro_

スコア19

test CHANGED
File without changes
test CHANGED
@@ -14,9 +14,9 @@
14
14
 
15
15
  - windowWidthが780未満の時はspanまたはliをclickしてもliが消えます。
16
16
 
17
- Xcodeのsimulatorからローカルファイルを確認しています。
17
+ - Xcodeのsimulatorからローカルファイルを確認しています。
18
-
18
+
19
- ディベロッパーツールからスマホサイズに切り替えた状態だと確認できません。
19
+ - ディベロッパーツールからスマホサイズに切り替えた状態だと確認できません。
20
20
 
21
21
 
22
22
 

9

前提条件の変更。

2018/11/19 09:40

投稿

akiiro_
akiiro_

スコア19

test CHANGED
File without changes
test CHANGED
@@ -14,6 +14,10 @@
14
14
 
15
15
  - windowWidthが780未満の時はspanまたはliをclickしてもliが消えます。
16
16
 
17
+ Xcodeのsimulatorからローカルファイルを確認しています。
18
+
19
+ ディベロッパーツールからスマホサイズに切り替えた状態だと確認できません。
20
+
17
21
 
18
22
 
19
23
  現在、liの削除は成功しています。

8

前提条件の変更。

2018/11/19 09:40

投稿

akiiro_
akiiro_

スコア19

test CHANGED
@@ -1 +1 @@
1
- sp時に子要素をclickすると親要素も反応してしまう
1
+ スマホの時に子要素をclickすると親要素も反応してしまう
test CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  ```
28
28
 
29
- sp時に子要素をclickしたら一瞬、親要素の背景がグレーになる。
29
+ スマホの時に子要素をclickしたら一瞬、親要素の背景がグレーになる。
30
30
 
31
31
  ```
32
32
 

7

前提条件の変更。

2018/11/19 08:42

投稿

akiiro_
akiiro_

スコア19

test CHANGED
@@ -1 +1 @@
1
- 子要素をclickすると親要素も反応してしまう
1
+ sp時に子要素をclickすると親要素も反応してしまう
test CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  ```
28
28
 
29
- 子要素をclickしたら一瞬、親要素の背景がグレーになる。
29
+ sp時に子要素をclickしたら一瞬、親要素の背景がグレーになる。
30
30
 
31
31
  ```
32
32
 

6

余分な変数を削除

2018/11/19 08:41

投稿

akiiro_
akiiro_

スコア19

test CHANGED
File without changes
test CHANGED
@@ -64,10 +64,6 @@
64
64
 
65
65
  $('<li class="js-myself-skill-tag-list-item js-sp-myself-skill-tag-list-item-delete">' + skills[i].name + '<span class="profile-edit-add-tag-myself-list-item-delete js-myself-skill-tag-list-item-delete"></span></li>');
66
66
 
67
-
68
-
69
- var a = $myselfSkillTagList.append(dynamicMyselfTagListItems);
70
-
71
67
  });
72
68
 
73
69
 

5

console.log();が記入されていたので削除。

2018/11/19 08:09

投稿

akiiro_
akiiro_

スコア19

test CHANGED
File without changes
test CHANGED
@@ -68,8 +68,6 @@
68
68
 
69
69
  var a = $myselfSkillTagList.append(dynamicMyselfTagListItems);
70
70
 
71
- console.log(a);
72
-
73
71
  });
74
72
 
75
73
 

4

前提条件の変更。

2018/11/19 08:08

投稿

akiiro_
akiiro_

スコア19

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  ul>li>spanで作成しています。
10
10
 
11
- - li、spanはajaxで動的に生成しています。
11
+ - li、spanは動的に生成しています。
12
12
 
13
13
  - spanをclickするとliが消えます。
14
14
 

3

cssのインデントを修正

2018/11/19 08:07

投稿

akiiro_
akiiro_

スコア19

test CHANGED
File without changes
test CHANGED
@@ -192,7 +192,7 @@
192
192
 
193
193
  font-family: "Font Awesome 5 Free";
194
194
 
195
- content: "\f00d";
195
+ content: "\f00d";
196
196
 
197
197
  font-weight: 900;
198
198
 

2

gifの下に余分な文があったので修正。

2018/11/19 08:06

投稿

akiiro_
akiiro_

スコア19

test CHANGED
File without changes
test CHANGED
@@ -218,7 +218,7 @@
218
218
 
219
219
 
220
220
 
221
- ![イメージ説明](5f2a236dc145c6c05911b2df7691acae.gif)説明](d3991f0c0aa6670fd358de58d130c0ae.gif)説明](2872ea463e05feb2ec74da04c19739ef.gif)](05ac247448f81396ae728a2bdd170b39.gif)
221
+ ![イメージ説明](5f2a236dc145c6c05911b2df7691acae.gif)
222
222
 
223
223
  simulatorでlocal確認していますが実機でも同じ現象が出ます。
224
224
 

1

状態を確認できるコードに変更。それに伴いgifも変更。

2018/11/19 07:45

投稿

akiiro_
akiiro_

スコア19

test CHANGED
File without changes
test CHANGED
@@ -38,13 +38,39 @@
38
38
 
39
39
  ```JavaScript
40
40
 
41
+ $(function () {
42
+
41
43
  var $myselfSkillTagList = $('.js-myself-skill-tag-list');
42
44
 
43
45
  var windowWidth = $(window).width();
44
46
 
45
47
  var windowMedium = 780;
46
48
 
47
-
49
+ var skills = [
50
+
51
+ {name: 'Illustrator'},
52
+
53
+ {name: 'Photoshop'},
54
+
55
+ {name: 'Indesign'},
56
+
57
+ ];
58
+
59
+
60
+
61
+ $.each(skills, function(i) {
62
+
63
+ var dynamicMyselfTagListItems =
64
+
65
+ $('<li class="js-myself-skill-tag-list-item js-sp-myself-skill-tag-list-item-delete">' + skills[i].name + '<span class="profile-edit-add-tag-myself-list-item-delete js-myself-skill-tag-list-item-delete"></span></li>');
66
+
67
+
68
+
69
+ var a = $myselfSkillTagList.append(dynamicMyselfTagListItems);
70
+
71
+ console.log(a);
72
+
73
+ });
48
74
 
49
75
 
50
76
 
@@ -98,15 +124,83 @@
98
124
 
99
125
  }
100
126
 
127
+ });
128
+
129
+
130
+
101
131
  ```
102
132
 
103
133
 
104
134
 
105
135
  ```HTML
106
136
 
137
+ <!doctype html>
138
+
139
+ <html>
140
+
141
+ <head>
142
+
143
+ <meta charset="UTF-8">
144
+
145
+ <meta name="viewport" content="width=device-width" initial-scale="1.0">
146
+
147
+ <title>無題ドキュメント</title>
148
+
149
+ <link rel="stylesheet" href="test.css">
150
+
151
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
152
+
153
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
154
+
155
+ <script src="test.js"></script>
156
+
157
+ </head>
158
+
159
+
160
+
161
+ <body>
162
+
107
- <ul class="profile-edit-add-tag-myself-list js-myself-skill-tag-list">
163
+ <ul class="profile-edit-add-tag-myself-list js-myself-skill-tag-list">
108
-
164
+
109
- </ul>
165
+ </ul>
166
+
167
+ </body>
168
+
169
+ </html>
170
+
171
+
172
+
173
+ ```
174
+
175
+
176
+
177
+ ```CSS
178
+
179
+ .profile-edit-add-tag-myself-list-item-delete {
180
+
181
+ color: #808080;
182
+
183
+ margin-left: 5px;
184
+
185
+ padding: 8px 0;
186
+
187
+ }
188
+
189
+
190
+
191
+ .profile-edit-add-tag-myself-list-item-delete::before {
192
+
193
+ font-family: "Font Awesome 5 Free";
194
+
195
+ content: "\f00d";
196
+
197
+ font-weight: 900;
198
+
199
+ }
200
+
201
+
202
+
203
+
110
204
 
111
205
  ```
112
206
 
@@ -124,7 +218,7 @@
124
218
 
125
219
 
126
220
 
127
- ![](cb929a23ef4197699b5a45628fe50b1b.gif)
221
+ ![イメージ説明](5f2a236dc145c6c05911b2df7691acae.gif)説明](d3991f0c0aa6670fd358de58d130c0ae.gif)説明](2872ea463e05feb2ec74da04c19739ef.gif)](05ac247448f81396ae728a2bdd170b39.gif)
128
222
 
129
223
  simulatorでlocal確認していますが実機でも同じ現象が出ます。
130
224