iosで「特定の要素の外をクリックしたらポップアップを閉じる」を適用する

stopPropagation()

最近よく要求されて、なおかつよく忘れるのでメモとして残します。 ついでに頭に残すために記述してます。

See the Pen stopPropagation by 【LIGHT WINGER】 saiko (@saikofall-the-typescripter) on CodePen.

仕様としては下記の通り

  • 1.ボタンを押すとメニューが右から出現する(この時背景にはbeforeで黒を敷く)
  • 2.documentをタップするとメニューが閉じる(背景の黒くなっている部分)

というだけのもので、重要なのが二番目の黒背景タップ、クリックで閉じること。 それと同時に、wrapの中身をタップしても閉じないこと。

ここで利用するのがstopPropagationで、親への伝播を止めることができます。 これがない場合、「ボタンをタップするとメニューが開く」と「documentをタップするとメニューが閉じる」が同時に動きます。 タイミングの問題で、後者が最後に発動するので、メニューが開きません。 なのでボタンタップ時にdocumentのjsが動かないようにstopPropagationで伝播を止めて、閉じないようにします。

これが今回の備忘録全貌です。

iosにおける処理

問題点:iosだと二番目の処理である「documentタップで閉じる」が動かない PCは動く、Androidは知らん。

で、まずは解決記事。

https://qiita.com/myzkyy/items/ce6a26c9c59612e6f515

技術的な方法も含め上記の記事に書いてあるのでその辺は全部読んでください。 それでこれを読んで、今回使った解決法。

解決:touchstart または touchend を使う

これで解決しました。 記事でも書いてありますが、clickイベントとtouchstartイベントで処理が違うので挙動が変わります。 まあ多分問題ない範囲ではあります。

記事内でも「該当要素にcursor: pointerを付ける」があります。 ただ今回の場合、該当要素がbeforeで疑似要素なので使いませんでした。 試してないけど効かなそうだし、そもそもtouchstart効いたし。

終わり

というわけで、これでちゃんと動きましたとさ。 次回動かないことがあったらこれ見ます。

それでは今日はここらでサヨウナラー

関連記事

デフォルト画像
2018.10.25
秋M3の気になるサークルリストできた!!!!

イエーイめーっちゃ疲労感 ぼくのM3チェックリスト http://event.saikofall.com/m3/2018-autumn/ 数日かけて作りました、チェックリストです。 まさかここまで時間が掛かるとは思いませんでした。 先日カタログを買って、まだ1週間あるし余裕やろと思ってたんですが、思いの外手強い。 全サークルをチェックしてたのが原因なんですけど。 だけどそのおかげでしっかり見れたゾ! 今回の事前調査では26のサークルに当たりをつけました。 当日はガンガン狙っていきますよ~~~~。 まだ行く順番とかは決めてないです。 通販とかデジタルで良いのでは!?と最初は思ったんですが、結局行きたくなるんですよねぇ。 定期的にこの手のイベント(即売会)は行きたくなるからしょうがないです。 そもそもほとんど現場の雰囲気を味わうために行ってる節がありますね。 しょうがない。 サークルリスト リンクで上げてますが、今回はちょっと頑張りました。 最近流行りだって会社で聞いたのでUIkitを利用しています。 英語で書かれたコンポーネントを見ながら作るのは結構手間やんな…。 それでも簡単にカードタイプのリストを作れたので上々なんですが。 ドメインはこのブログに使ってるやつをサブドメイン切って使ってます。 新規取得したり、どっかのサーバーの初期ドメインはあまり考えたくなかったので。 別にWordpress入れて管理するわけでもないのでいいかなーと。 リストの生成にはjsonを使っています。 jsonに記述した要素をjsで引っ張ってきて出力してるって感じ。 なので実はHTMLのファイルはほとんど記述がなかったりします。 リストは全部jsで出力してるからですね。 とても便利。 正直わかる人ならWordpressとか必要ないってことになりますね。 まあ大規模なものはまた別ですが。 というこって、なんだかんだであまり利用したことのない技術を使ってるわけですよ。 主にjsonとUIkitらへん。 前者は会社で使うこともありますが、UIkitは趣味の範囲内のものですね。 なんでかって? この手のはそれを使う前提でデザイン起こしてもらう必要があるからだよ!!! 基本的に自由度が失われるので、ちゃんとデザインも各コンポーネントに沿って作ってもらう必要があるんですよね。 といった感じで作りましたが、実はまだ完成形ではありません。 なぜかと言えば、このままだとスマホでは見づらいからです。 カード型の弱点だと思ってます。 現在実装中の機能としては、ページ右上にあるアイコンですね。 これを押すと「リスト型」と「カード型」に切り替えができるって寸法です。 jQueryでゴリゴリ開発中です。 ぶっちゃけそんなプログラム部分は終わってるんですが、リスト型のデザインで手間取ってる感じです。 実はjs部分は終わってたりして。 目標は明日の終わりぐらいには作り終わってるってところです。 そうしないと間に合わないからね。 当日はこれと紙とスマホに保存したチェックリストを臨機応変で使っていくことになります。 楽しむぞ。 それでは今日はここらでサヨウナラー

デフォルト画像
2018.05.24
「半兵ヱ」にある蛙が気になったんですけど

薄利多賣 つい先日ね、半兵ヱって店行ってきたんですよ。 飲み屋なんですけどね、焼き鳥死ぬほど食いてえつって友人とね。 50円でめっちゃ食えるとか言われるからね。 飲み屋ですけど、なぜかクリームソーダ(クソ)を飲みだすぼく。 女の子が頼みそうなカクテル「魔法使いサリー」を飲みだすぼく。 星のこれがすき、だいすき。 ぼくの中では「鉄腕アトム」との二択でした。 そして麦飯と焼鳥を食い出すぼく。 麦飯100円で、焼き鳥おまかせ10点盛りが600円ぐらい。 つまりここは、飯屋ですな? 飲み屋じゃないよぉ…。 そんなぼくの目の前に、「カエル」や「イナゴ」の文字が! ぼくはイナゴを散々食べた思い出があるんですが、カエルは一度もないのです。 いつか食べてみようとか思っていたのですが、まさかここで現れるとは…。 その日は恐ろしい思いはできぬ、ということで食べずに帰りました。 今日この日記を見た人、どうかぼくと半兵ヱに行ってください。 そしてカエルを一緒に見てください。 焼き鳥は適当に頼め! 揚げ物も適当に頼め! そしてカエルを頼もう! 食べよう!カエル!食べよう!イナゴ! ちなみに10点盛りの焼き鳥を麦飯に乗せて食ったら死ぬほど美味かったです。 正直今週は「半兵ヱ行きてえ…」とかずっと考えてました。 だから誰か一緒に行ってください、お願いします。 麦飯に焼き鳥とかカエル乗せて食ってみてえよ…。 それでは今日はここらでサヨウナラー

2019.09.09
新しくディスプレイ買いました

55型のパワー 我が家に55型のディスプレイが来ました…。なんで? 先日パソコン工房に行ったら、中古ディスプレイコーナーにサムネ左のディスプレがあったんですよ。Samsungの55型サイネージ、定価60万の化け物ディスプレイです。間違いなく個人用ではなく、店舗とかで店頭ディスプレイとして置かれるタイプのアイテムです。間違っても家で使うような代物ではないことは確かです。 配置してみたら、こんな感じ。 もはやテレビボードに収まりきりませんでした。無理なのではみ出させてます。こんなデカイの想定しとらんって。 これがなぜか1万円で売ってたんですよね。20キロもあったので持ち運びは死ぬほど苦労しましたけど。 店員さんに話を聞いてみましたが、どっかの店舗がもう使わなくなるってんで卸されてきたものだそう。どうせなら誰かに使ってもらいたいってことで入ったんですって。そこを目ざとく見つけたぼくが買ったってわけですね!多分こんなの買う人間いないと思うんですけど(名推理) そんなわけで、どうせならということでSwitchを接続してデモンやってみました。 大 迫 力 ! めちゃくちゃ面白く感じます。久々にコンシューマゲーやりましたが、やっぱ大画面でやるゲームは最高に面白くていいですねー。これまで32型までぐらいしか経験したことないので、気持ちが良すぎて絶頂しそうです。 今週デモンエクスが発売される予定なので、真夜中まで遊ぶことになりそうです。Switchで遊びまくるぞ~~~~! それでは今日はここらでサヨウナラー