【JavaScript】
ボタンの連続クリック・2度押しを防止する方法
buttonの2度押し防止策
投稿日 2021/05/21 更新日 2021/05/21
こんにちは。IT業界歴４年目の「元木皇天」です。
Webサイト上でボタンを押したら処理が起こるようなJavaScriptの実装（oncklickイベント）はよくあります。
しかし、1回のみ押せるようにしたいといった場面や、連打されると思わぬ挙動をして困る場面があります。 （Ajax通信などで処理をするときなど。）
今回はボタン押下時に、２度押し・連続クリックを防止する方法について解説いたします。
環境
OS：MacOS Venture
GoogleChrom：Ver 114.0.5735.106
やりたいこと
1.ボタンを2度押しできないようにする
2.ボタンを連続クリックできないようにする
1.の実装イメージ
2.の実装イメージ
（早すぎてわかりにくいですが、連続で押せないようになっています。）
実装方針
実装方法についてまずは解説します。
といっても難しいことは何もしません。ボタンを押した後に、ボタンを押せなくする処理を入れればいいだけです。
ここではボタン押下時にボタンをdisabledにすることで２度押し・連続クリックを防止する方法について解説いたします。
ボタンの2度押し防止方法
まずはボタンの2度押しを防止する方法です。
先ほども説明したように、ボタンを押したときの処理の先頭でボタンを非活性にすればOKです。
実際のコードは以下の通りです。
ボタンにonclickイベントを設定して、その中に処理を記載します。（idが"sample1"というボタンに対して２度押し防止を実装するという想定で記載しています。）
//ボタンの要素を取得
const sample1 = document.getElementById('sample1');
//ボタン押下時のイベントを設定
sample1.onclick = () => {
//２度押し防止の実装
sample1.disabled = true;
/*==============================
ここにボタンを押した時の処理を記載する
===============================*/
};
ボタンの連続クリック防止方法
次にボタンの連続クリックを防止する方法について解説します。
といっても、先ほどとほとんど変わりません。
実装方法としては処理開始時にボタンを非活性にし、処理が完了したらボタンを活性に戻すだけです。
以下は実装例です。（idが"sample2"というボタンに対して連続クリック防止を実装する想定で記述しています。）
//ボタンの要素を取得
const sample2 = document.getElementById('sample2');
//ボタン押下時のイベントを設定
sample2.onclick = () => {
//連続クリック防止の実装
sample2.disabled = true;
/*==============================
ここにボタンを押した時の処理を記載する
===============================*/
//処理が完了したらボタンを活性状態に戻す
sample2.disabled = false;
};
まとめ
ボタンの２度押し・連続クリックを防止するにはボタンを非活性にする。
