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

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

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;をもつクラスを作って、addClassremoveClassするといいと思います。

スポンサーリンク
JavaScript
スポンサーリンク
でざなり