【JavaScript】クリック・タッチの長押しを判定する

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

本記事では、JavaScriptでマウスクリックやスマホのタッチ操作による長押しを判定する方法をご紹介しています。

JavaScriptで長押しの判定をするにはどうすればいいんだろう？

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

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

長押しの判定方法について

JavaScriptには、クリックやタッチの長押しを判定するイベントが存在しません。そのため長押しの判定が必要な場合はライブラリを使用する、もしくは自分で一から処理を組み込む必要があります。

自分で一から処理を作るぞ！という方は本記事の次項からの内容を参考にしていだければ幸いです。

ライブラリを使ってみたいなという方は、下記をご使用ください。

long-press-event：https://github.com/john-doherty/long-press-event

クリックやタッチの長押しを判定する

前項でお話ししたように、JavaScriptにはマウスのクリックやスマホのタッチの長押しを判定するイベントが用意されていません。そのため下記のイベントを使ってマウスクリックの長押しを判定する処理を作る必要があります。

mousedown
mouseup

スマホのタッチの長押しを判定したい場合はイベントの部分を下記に置き換えてください。

touchstart
touchend

実際に使用される場合はユーザーエージェント情報等を取得して設定するイベントを設定すると良いかもしれませんね。

本記事で作成するもの

下記のデモの内容を作成します。デモ内のボタンを1秒クリックするとアラートが表示されますので、実際にボタンをクリックして動作をご確認ください。

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

下記がデモで使用しているソースです。

HTML

<button id="long-press">Long Press</button>

JavaScript

const longPress = {
    //プロパティ
    el: '',
    count: 0,
    second: 1,
    interval: 10,
    timerId: 0,

    //メソッド
    init: function(param){
        //引数のパラメータ取得
        this.el = document.querySelector(param.el);
        this.second = param.second;
        //イベントリスナー
        this.el.addEventListener('mousedown', ()=>{ this.start() }, false);
        this.el.addEventListener('mouseup', ()=>{ this.end() }, false);
    },
    start: function(){
        this.timerId = setInterval(()=>{

            this.count++;
            
            if(this.count / 100 === this.second ){
                //長押し判定時の処理
                this.myFunc();
                this.end();
            }
            
        }, this.interval);
    },
    end: function(){
        clearInterval(this.timerId);
        this.count = 0;
    },
    myFunc: function(){
        alert('ボタンを' + this.second + '秒長押ししました！');    
    }
}

//初期化
longPress.init({
    el: '#long-press', //長押しの判定を取りたい要素のセレクタを指定する
    second: 1, //長押しの秒数を指定する
});

基本的にオブジェクト（longPress）を呼び出す際に引数に指定する要素（el）と秒数（second）の値を変更するだけで使用できます。長押し時の処理はメソッド内（myFunc）に記述していますので、内部の処理を変更してご使用いただければと思います。

最後に

本記事の内容は、あるプラグインを開発する中で要素の長押しを判定する必要があったので作成した内容です。長押しだけを判定すればよかったので普通のクリックやタッチ操作については除外していますが、少しカスタマイズすれば長押しじゃない場合の操作についても実装できるはずですので、必要な方は本記事の内容をカスタマイズしてみてくださいね。

以上、JavaScriptでクリック・タッチの長押しを判定する方法のご紹介でした！