Riot.jsなどのJavaScriptフレームワークを使うと、簡単に要素を出したり消したりできます。ただ、時にはそれでややこしい現象になることもあります。

イベントが…うまく伝わらない

Riotで作ったモジュールで、「確認済み - 未確認」の状態を制御するものを作っていました。

というような形となっていました。ところが、この確認ボタンを押すと、確認フラグをセットしてボタンを消す…ところまでは動くのですが、ブラウザによってその後に送信されるかされないかが違ってくる、という状況になってしまいました。

原因

どうやら、「イベントを送ったエレメントをイベント中に削除した場合」にどうなるかが、ブラウザによって違ってくるようでした。あるブラウザでは「そのままイベントが上まで伝わる」、別なブラウザでは「削除した段階でイベントが止まる」というようになっていたのです。

ということで、イベントを上まで波及させる必要のあるエレメントは、ifでエレメントごと削除してしまうのではなく、display: noneで表示だけ消す、という処置を取るほうが適当なようです。