【JavaScript】初回クリック時にのみ処理を実行する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで初回クリック時にのみ処理を実行する方法をご紹介しています。

JavaScriptで1回目のクリックだけに反応するボタンが作りたいんだけど、どうすればいいの?

上記の疑問のお答えしています。

では、解説していきます。

addEventListenerのonceをtrueにする

初回クリック時にのみ処理を実行するには、addEventListeneroptiononce: trueを設定する方法が一番簡単です。下記のようにaddEventListeneroptiononce: trueと追加するだけです。

let btn = document.getElementById('btn');

btn.addEventListener(
'click',
function () {
alert('Clicked!!');
},
{ once: true }
);

上記のようにoptionを指定することで1回だけイベントを発火するという処理を実装することができます。簡単で簡潔ですよね。

下記で実行結果をご確認いただけます。ボタンをクリックすると、一度だけアラートが表示されるかと思います。

See the Pen
6047-1
by ryohei (@intotheprogram)
on CodePen.

ただ、このoption…欠点があります。残念なことにIE11で動作しないのです。IE11に対応しない方針であれば、こちらの方法がベストなのですが、IE11に対応しなければならない場合は、別の方法を考える必要があります。

せっかくですので、IE11でも動作する処理を考えてみましょう。

IE11で初回クリック時にのみ処理を実行する

初回のみ実行する処理……と聞いてパッと思いつくのはやっぱりあれとあれですよね。

クリック済みのフラグを立てる

1つ目はフラグです。ボタンがクリックされたらフラグを立てて条件分岐するという王道の処理ですね。

スクリプトにすると下記のようになります。

let clicked;
let btn = document.getElementById('btn');

btn.addEventListener('click', function () {
if (clicked !== true) {
alert('Clicked!');
}
clicked = true;
});

下記は実行結果です。初回クリック時にのみアラートが表示されて以降はクリックしてもアラートは表示されないかと思います。

See the Pen
6047
by ryohei (@intotheprogram)
on CodePen.

これが1つ目の代替案です。

2つ目の代替案は、設定したクリックイベント自体を削除してしまう方法です。

クリックイベントを削除する

ではイベントを削除する処理を作成してみます。

let btn = document.getElementById('btn');

function myFunc(){
alert('Clicked!');
btn.removeEventListener('click', myFunc, false);
}

btn.addEventListener('click', myFunc, false);

上記のスクリプト5行目にイベントを削除する記述を入れています。こうすることで設定されていたクリックイベントを削除することができます。

実行結果を確認してみると、初回クリックの後にイベントが削除されているかと思います。

See the Pen
6047-3
by ryohei (@intotheprogram)
on CodePen.

上記2つの代替案であればIE11で想定した動作になるかと思います。

最後に

現在のJavaScriptには、IE11で動作しないプロパティや関数やオプションが数多く存在します。JavaScriptはドキュメントが充実していますし、Web上には多くの情報が提供されています。動作が定かではないものに関しては都確認するようにしておくことでクレームを免れることができます。IE11のサポートが切れるまで後数年……もうしばらくの我慢です。歯を食いしばってがんばりましょう。

以上、JavaScriptで初回クリック時にのみ処理を実行する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍