どうも7noteです。clickイベントが重複して動くのはon()の重複のせいだった。

以前、躓いてしまったのでまとめました。

問題

1回押したら開く、もしくは閉じるだけしたいのに、
以下のようにクリックしたら2回（もしくは2回以上）動作してしまう。

原因

on()を複数回指定しているのが原因でした。
ウィンドウサイズによって切り替えつつ、クリックイベントも同時に動かそうとしたときに発生しました。

// 不具合が起こるソースの例
$(function(){
  $(window).on('load resize', function(){
    var w = $(window).width();
    var x = 768;
    if (w <= x) {
      $('.tab').on('click',function () {
        $('.hogehoge').slideToggle();
      });
    }
  });
});

他の原因

クリックしているのがlabel要素だと、labelとinputが重複して反応し2回になっている可能性も大。

対策

off()を使うと対策可能。

例.js

//~~~省略~~~
$('.tab').off('click');     // 2回目のonの前にあらかじめ.off()を実行
$('.tab').on('click',function () {
  $('.hogehoge').slideToggle();
});
//~~~省略~~~

まとめ

.click()でも同じことが起こるようです。
.on()では処理がどんどん積み重なり、それが重複して起動してしまう仕様のようです。

いままでもon()を重複して作成している時があったのですが、作りがたまたまよかったのか特に問題なく動くことがほとんどでした。
しかし、「前はこれでうごいたはずなのに」となってしまい原因の追求に時間がかかってしまいました。

プログラミングは知っていれば1分もかからないことを、知らないと1時間2時間とかかってしまうので、基礎知識はとても重要だなと痛感しました。
これからも日々精進してまいります。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

参考
https://qiita.com/nekoneko-wanwan/items/3d3da95f1127f743397d