jQueryで一定時間だけクリックを無効にする方法

jQueryでスライダーを作っていて、矢印を連続クリックするとスライド処理が追い付かずに挙動がおかしくなってしまったので対策としてスライドしている間はクリックを無効にしようと考えました。

てなわけでjQueryで一定時間クリックを無効にする方法を解説します。

jQueryで一定時間クリックを無効にする方法

やることは簡単です。

処理時にpointer-events: none;を追加し、一定時間経過後にそれを解除するだけ。

$(function() {
  $('.button').click(function() {
    var $this = $(this)
    $this.css('pointer-events', 'none');
    setTimeout(function () {
      $this.css('pointer-events', '');
    }, 2000);
  });
});

解除にはsetTimeoutを使って、一定時間が経過したら解除するようにします。

クリックされた要素に指定したい場合は$(this)とそのまま書いても効かないので、一度変数に入れるようにしましょう。

もし「jQuery側でインラインスタイルを入れたくない…」という場合はpointer-events: none;をもつクラスを作って、addClassとremoveClassするといいと思います。

ZennでCSS設計の
本を書きました！

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です！

読んでみる