スマホサイトのコーディングをしている際に、あるボタンをタッチした際に設定しているイベントがなぜか2回発火されるという場面に遭遇しました。
しかもいつも2回発火されるわけではなく、時によって3回だったり4回だったり1回だったりと法則が不明…。
個人的に調べてみても原因が全然わからず、先輩に泣きついたところあっさり解決しました。
ボタンに対してイベントが重複登録されていたのです。。
原因はイベントを記述した関数が、リサイズのたびに呼び出される類のものだったこと。
リサイズされるたびに、ひとつのボタンにイベントが登録され続ける仕様になっていました。そりゃ時によって発火回数が変わるわけです。
なんでもかんでも１つの関数にまとめれば良いわけじゃありませんね。。
今回はイベントを関数の外に出しても問題無い仕様だったので、簡単に修繕できましたがそうはいかない場合も出てくると思います。
そういう場合は以下の方法などがあるようです。
■.onの前に.offを入れて、解除、登録を繰り返してイベントの登録を一つに抑える。
■if文でフィルターをかけてイベントの高速発火自体を防止する。
参考：jQueryイベント発生の重複を防ぐ小技
まあ、重複登録しない設計にするのが一番だと思うので、今後気を付けたいと思います。
