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効いたし。

終わり

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

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

関連記事

2021.02.06
【ブルアカ】ブルーアーカイブはじめました

まーたソシャゲ増やして 2月4日から配信がはじまったYostarの新作、ブルーアーカイブをはじめました。抱えてるソシャゲ多すぎ問題。そうでもないか。 ブルアカの存在自体わりと最近知ったんですが、まさかこんな早く配信されるとは思っていませんでした。なんか4月とか5月とか、春以降になるんだろうな~って勝手に思っていましたの。そこは流石のYostar? しかしアレですね、アズレン、アクナイと続けて注目度高めのタイトルを出しているのはしっかりしててすごいっすね…。それほどに広報にも金かけてるんでしょうけど、去年出た原神と比べるのはあまりにも酷、というか土俵が違うか。ソシャゲ界においては知らん人はいねえ!ってレベルになってますね。 新鮮なガチャ ガチャガチャする時間ですよ。ソシャゲはガチャで支えられてるんだから、ガチャ報告をするのは義務です。 リセマラなんて行為には屈しねえ!出たキャラを愛せ! それにしても、このツルギちゃんって子、大変推せますね…。妙なガイガイ味があふれててとても好きです。もっと姿見せて? なんとなく、ガチャの雰囲気はプリコネを思い出しました。3か月ぐらいしかプレイしませんでしたけど、ガチャ結果の画面が似てるだけかな?金色とか虹色とかが出てるとプリコネにしか見えなくなってきたんだわ(病気) リセマラする時間は育成とかに当てたいので、とっとと進めています。スタミナは石30で回復できて、1日に20回まで購入できる模様。相変わらず、あっちのソシャゲは回復制限と石消費量が回数に応じて増えていくので、その辺の制限はしっかりしてます。なんでこの方式流行ってるんですかね?人死にが出ないため? ゲーム性はわりとしっかりしてて、その上あんまり時間がかからないし放置してても良い、という部分が気に入りましたね。実際考えることはあまりないので、ゲーム部分に過度な期待はしなくていいんじゃないかな…。動きは信じられないぐらいしっかりしてるので、基本無料でこれが遊べるって良いソシャゲ時代だと思いますよ? ぼくは1日1回に制限してますが、キャラのカットインが大変かあいらしい。 ツルギお前ほんとかわいいな…。もっと顔見せろ。 バトル性はあまりまだよく理解してませんが、なんとなくで進めてられるので安心です。☆3がいれば安心! そういえば、育成システムもおおよそプリコネでした。レベル上げて、スキル上げて、武器装備させてそれの品質上げて、という感じで。プリコネやってる人らは「プリコネじゃん!」ってなるんですかね。ぼくはなりましたけど。 なんとなくやってて楽しいので、しばらくはこれで遊ぶ予定です。ガンガン石割ってスタミナ回復して、とっととレベル上げるぞ。 汝ツルギちゃんを愛せ こんなに多彩な表情を出せるツルギちゃん!先生に撫でられて照れちゃうツルギちゃん!頼むから1枚絵をくれ! そんな顔されたら一晩で法隆寺建っちゃうよ。ショットガンで相手ぶったたいたりしてほしい。

デフォルト画像
2019.02.03
インフルと戦いながらドラール・メデューナと戦う

覇級がなんか進化してる件について インフルエンザになったぼくです。 中々の辛さがあります。 昨日は超PSO2の日だったこともあり、睡眠を大量に取りながらも戦うときはキッチリ戦ってました。 今日もしんどさを味わいながら恐ろしいことに出勤してきたわけですが、 なんか☆14も追加されてるっぽいしとクソダルいながらPSO2esやってました。 今期の緊急で、恐らく1年ぶりぐらいにまともな覇級プレイになります。 メデューナとか追加されてたんすねぇ~。 何気にショック付与が入ったりして鬱陶しいですね。 あと技が大振りなのと判定が長いせいでグリムバラージュとか打つと一発もらったりしちゃうんですよね。 タイミングがちゃんと重なればちょうど判定終わる頃にこちらも二発目入れられるんですけど。 今回の緊急はやはり慣れもあってメデューナのほうがちゅらいっしゅ。 しかたーない。 今回の覇級ワンパン編成(*1のみ) いわずもがな、ぼくはほとんど復帰勢みたいなものなのでイベ限多めになります。 特に頼りにしてるのがダカバスとセレブですね。 説明しよう! ダカバスは今でも主力と言われてる前線級チップ!!! 火力にして299.5%がまさかのE枠なしで実現できてしまうのだ!!! ☆13が実装されて長い今ですら主力チップとして求められることの多い最前線チップですね。 D枠+追撃は強すぎると思います。 そしてセレブ、正式名称セレブレイトヒロインズもE枠を含まない複合型高火力チップなんですねー。 火力ではダカバスより上ですが、A枠判定なためこれでなく別チップとダカバス組む人のほうが多い気がします。 まあD枠被りしてますし、A枠にしても他で結構補えちゃったりするんですよね。 ただ、氷複合ってだけで氷弱点にはかなり強みのあるチップだから十分前線級だと思ってます。 光編成に関しては正直絶望的ですね。 一番最初に☆13チップが光だった関係か、フレンドに光☆13とかが多いのでそれでなんとか凌ぎました。 一応覇級ワンパンできたしセーフセーフ。 やはり火力はグリムよりファセフォリのほうが出るのでそれでなんとかって感じ。 闇はどうあがいても絶望的なのと、雷は今回対象じゃないので考えてすらないです。 闇チップもなんとかいしないといけないんですが、なぜか龍特攻とダーカー特攻しかないんですよね。 どうせっちゅうねん。 最近追加された☆14武器について アレ、まあいつもの如くタクトは出ないはず。 なので正直どうでもいいんですが、esで使うならかなり強いらしいのでほしいっちゃほしいです。 でも確か重ねた覇級じゃないと出ないんですよね? それを考えると、なんだかやる気が出ませんよね~~~~。 だって5枚重ねるとHP10億ですよ? かなり揃ってると自負してる炎と氷ですらグリムで1億3千万ぐらいしか削れなかったわけで。 激強フレさんとかは3億削ってましたけど。 どうなっとんねん。 とりあえずの目標は、やはり☆13チップを手に入れることですかね…。 今後それがないと戦えない!ってわけじゃないんですけど、それでもえっらい強いですからね。 ここ最近はとうとうE枠でないのも出てきたりしてるらしいですし。 暫くはチップ集めて適当なタイミングで放出する生活をしていきたいと思います。 それでは今日はここらでサヨウナラー

デフォルト画像
2018.11.19
DLCまで買ってしまった

経過は順調 またもお久しぶりです。 まだダクソⅢしてます。 今ほどDLC第一弾であるアリアンデル絵画世界を終えました。 というかDLC買っちゃいました! いやあ普通に面白かったもので。 絵画世界ですが、無印のより断然難しいですね。 MAP自体広いし、敵の種類多いし。 噂のフリーデさんはやってて楽しいボスでしたね。 火を得たフリーデさんはパターン覚えても辛かったですが、ゲール爺のおかげでクリア。 ひたすら交互に殴り続けるというパワープレイで仕留めました。 強靭度が低いのが悪い。 教父に関しては印象がうっすいですね…。 基本魔法力高めてきたので遠距離攻撃でサクサク溶けます。 ただ、のんびりしてると爺がいつの間にか死んでることがあるので困りどころ。 正直あの人HP少なすぎませんかね? そもそも残HPが見えないのっておかしいと思うんですけど。 なんで?実体だから? 今はDLC第二弾をインストールしている途中です。 吹き溜まりとかはよやりたい。 絵画世界の続編っぽいし、とても楽しみ。 近頃はダクソのしすぎで他のゲームをやらないという事態に陥っています。 そろそろドルフロとかプリコネとかPSO2とか、せめてデイリー的なのぐらいはやらないとなあ…。 やる気が出たら頑張る。 それでは今日はここらでサヨウナラー