teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問ios端末でスライドメニューの開閉の際、領域外のタップで閉じたい

編集履歴

回答編集履歴

3

コードの追加。

2016/06/09 10:05

投稿

kei344
kei344

スコア69407

test CHANGED
@@ -137,3 +137,117 @@
137
137
  ```
138
138
 
139
139
 
140
+
141
+ ---
142
+
143
+
144
+
145
+ **追記2：**
146
+
147
+
148
+
149
+ iPad では一応動きました。iOSとデスクトップではイベント伝播の順番が逆になっていたため、それを無理やり検知する方針で組めばできました。もっとスマートなコードにも出来るとは思われますが、力尽きました。
150
+
151
+
152
+
153
+ **動くサンプル：**[https://jsfiddle.net/4rdoa7t0/9/](https://jsfiddle.net/4rdoa7t0/9/)
154
+
155
+
156
+
157
+
158
+
159
+ ```JavaScript
160
+
161
+ jQuery( function() {
162
+
163
+ var _timeout = []
164
+
165
+ , funcAddT = function( t ){ _timeout.push( t ); }
166
+
167
+ , funcClearT = function(){
168
+
169
+ _timeout.forEach( function( t ){ clearTimeout( t ); } );
170
+
171
+ _timeout = [];
172
+
173
+ }
174
+
175
+ ;
176
+
177
+ $( 'body, .casebutton, .casemenu' ).hammer().on( 'tap', function( e ) {
178
+
179
+ var tgt = e.currentTarget.tagName.toLowerCase();
180
+
181
+ if ( tgt === 'body' ) {
182
+
183
+ if ( _timeout.length ) { // button が先行した場合
184
+
185
+ funcClearT();
186
+
187
+ // 何もしない
188
+
189
+ } else {
190
+
191
+ funcClearT();
192
+
193
+ funcAddT( setTimeout( 'close_menu()', 100 ) ); // body が先行した場合
194
+
195
+ }
196
+
197
+
198
+
199
+ } else if ( $(e.currentTarget).hasClass('casemenu') ) {
200
+
201
+ if ( _timeout.length ) {
202
+
203
+ funcClearT(); // body が先行した場合
204
+
205
+ } else {
206
+
207
+ funcClearT();
208
+
209
+ funcAddT( setTimeout( 'null_func()', 100 ) ); // button が先行した場合
210
+
211
+ }
212
+
213
+ } else {
214
+
215
+ if ( _timeout.length ) {
216
+
217
+ funcClearT(); // body が先行した場合
218
+
219
+ } else {
220
+
221
+ funcClearT();
222
+
223
+ funcAddT( setTimeout( 'null_func()', 100 ) ); // button が先行した場合
224
+
225
+ }
226
+
227
+ $( '.casemenu' ).hide();
228
+
229
+ $( this ).parents( '.all' ).children( '.casemenu' ).slideDown();
230
+
231
+ };
232
+
233
+ return false;
234
+
235
+ } );
236
+
237
+ window.close_menu = function() {
238
+
239
+ $( '.casemenu' ).slideUp();
240
+
241
+ funcClearT();
242
+
243
+ }
244
+
245
+ window.null_func = function() {
246
+
247
+ funcClearT();
248
+
249
+ }
250
+
251
+ } );
252
+
253
+ ```

2

解法の提案

2016/06/09 10:05

投稿

kei344
kei344

スコア69407

test CHANGED
@@ -34,11 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- **追記：**
37
+ **追記1：**
38
-
39
-
40
-
41
-
42
38
 
43
39
 
44
40
 
@@ -63,3 +59,81 @@
63
59
  Fix用ライブラリだと思われます。
64
60
 
65
61
 
62
+
63
+
64
+
65
+ ---
66
+
67
+
68
+
69
+ **追記2：**
70
+
71
+
72
+
73
+
74
+
75
+
76
+
77
+
78
+
79
+
80
+
81
+
82
+
83
+
84
+
85
+ 書いておられるコードでは、bodyと.casebutton それぞれのイベントが割り当てられているため、tap の度に両方走っていたようです。イベントを引き受ける関数をひとつにし、それでもbody⇒.casebutton の順で発生するイベントを一旦Timeout で外す方法でFirefoxで動きました。
86
+
87
+
88
+
89
+ ```JavaScript
90
+
91
+ jQuery( function() {
92
+
93
+ var _timeout;
94
+
95
+ $( '.casebutton, body' ).hammer().on( 'tap', function( e ) {
96
+
97
+ var tgt = e.currentTarget.tagName.toLowerCase();
98
+
99
+ if ( tgt === 'body' ) {
100
+
101
+ if ( _timeout ) { clearTimeout( _timeout ); }
102
+
103
+ _timeout = setTimeout( 'close_menu()', 100 );
104
+
105
+ } else {
106
+
107
+ if ( _timeout ) { clearTimeout( _timeout ); }
108
+
109
+ $( '.casemenu' ).hide();
110
+
111
+ $( this ).parents( '.all' ).children( '.casemenu' ).slideDown();
112
+
113
+ };
114
+
115
+ return false;
116
+
117
+ } );
118
+
119
+ window.close_menu = function() {
120
+
121
+ $( '.casemenu' ).slideUp();
122
+
123
+ }
124
+
125
+ } );
126
+
127
+ ```
128
+
129
+ ```HTML
130
+
131
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
132
+
133
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
134
+
135
+ <script src="https://cdn.jsdelivr.net/jquery.hammerjs/2.0.0/jquery.hammer.js"></script>
136
+
137
+ ```
138
+
139
+

1

補足の追加。

2016/06/08 18:58

投稿

kei344
kei344

スコア69407

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  ```JavaScript
4
4
 
5
- $( '.casebutton' ).hammer().on( 'tap', function() {
5
+ $( '.casebutton' ).hammer().on( 'tap', function( e ) {
6
6
 
7
7
  e.stopPropagation();
8
8
 
@@ -27,3 +27,39 @@
27
27
  【jQuery： イベント処理を中断するには？（preventDefault／stopPropagation／stopImmediatePropagation） - Build Insider】
28
28
 
29
29
  [http://www.buildinsider.net/web/jqueryref/022](http://www.buildinsider.net/web/jqueryref/022)
30
+
31
+
32
+
33
+ ---
34
+
35
+
36
+
37
+ **追記：**
38
+
39
+
40
+
41
+
42
+
43
+
44
+
45
+ 【Event delegation and how to stopPropagation preventDefaults · hammerjs/hammer.js Wiki · GitHub】
46
+
47
+ [https://github.com/hammerjs/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults](https://github.com/hammerjs/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults)
48
+
49
+ > ev.gesture.stopPropagation()
50
+
51
+
52
+
53
+ 【Prevent tap on parent element · Issue #652 · hammerjs/hammer.js · GitHub】
54
+
55
+ [https://github.com/hammerjs/hammer.js/issues/652](https://github.com/hammerjs/hammer.js/issues/652)
56
+
57
+
58
+
59
+ 【GitHub - josdejong/propagating-hammerjs: Extend hammer.js with event propagation】
60
+
61
+ [https://github.com/josdejong/propagating-hammerjs](https://github.com/josdejong/propagating-hammerjs)
62
+
63
+ Fix用ライブラリだと思われます。
64
+
65
+