【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でクリック・タッチの長押しを判定する方法のご紹介でした!

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

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

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら