stopPropagation() 最近よく要求されて、なおかつよく忘れるのでメモとして残します。 ついでに頭に残すために記述してます。 See the Pen stopPropagation by 【LIGHT WINGER】 saiko (@saikofall-the-typescripter) on CodePen. 仕様としては下記の通り １．ボタンを押すとメニューが右から出現する（この時背景にはbeforeで黒を敷く） ２．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効いたし。 終わり というわけで、これでちゃんと動きましたとさ。 次回動かないことがあったらこれ見ます。 それでは今日はここらでサヨウナラー

stopPropagation() 最近よく要求されて、なおかつよく忘れるのでメモとして残します。 ついでに頭に残すために記述してます。 See the Pen stopPropagation by 【LIGHT WINGER】 saiko (@saikofall-the-typescripter) on CodePen. 仕様としては下記の通り １．ボタンを押すとメニューが右から出現する（この時背景にはbeforeで黒を敷く） ２．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効いたし。 終わり というわけで、これでちゃんと動きましたとさ。 次回動かないことがあったらこれ見ます。 それでは今日はここらでサヨウナラー

stopPropagation() 最近よく要求されて、なおかつよく忘れるのでメモとして残します。 ついでに頭に残すために記述してます。 See the Pen stopPropagation by 【LIGHT WINGER】 saiko (@saikofall-the-typescripter) on CodePen. 仕様としては下記の通り １．ボタンを押すとメニューが右から出現する（この時背景にはbeforeで黒を敷く） ２．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効いたし。 終わり というわけで、これでちゃんと動きましたとさ。 次回動かないことがあったらこれ見ます。 それでは今日はここらでサヨウナラー