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

こんにちは、Ryohei（@ityryohei）です！

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

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

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

addEventListenerのonceをtrueにする

初回クリック時にのみ処理を実行するには、addEventListenerのoptionにonce: trueを設定する方法が一番簡単です。下記のようにaddEventListenerのoptionにonce: 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で初回クリック時にのみ処理を実行する方法のご紹介でした！