JavaScriptでボタンの長押し判定を実装する

2021/11/9 JavaScript, プログラミング

最近仕事で、JavaScriptでボタンの長押し判定を実装するという機会がありました。

長押しをするというのはネイティブのイベントでは用意されていないものだったので、一瞬どうしたらいいのかなと思ったのですが、なんだかんだで問題なく実装できたので、ブログに記録として残しておきたいと思います！

JavaScriptで長押し判定を実装するためのコード

それでは早速結論から！JavaScriptで長押し判定を実装するためのコードを書いてみたいと思います！

[JavaScript]

let count = 0;
let timer;
const longPushSecond = 1;

const btn = document.getElementById('btn');
const result = document.getElementById('result');

btn.addEventListener('mousedown', e => {
  timer = setInterval(() => {
    count++;
    if((count / 100) > longPushSecond){
        result.textContent = "長押し中";
    }
  }, 10);
})
 
btn.addEventListener('mouseup', e => {
  if (count > 0) {
    clearInterval(timer);
    result.textContent = "押してない"
    count = 0;
  }
});

[HTML]

<button id="btn" type="button">押すなよ～。。。</button>
<div id="result"></div>

setIntervalを使ってボタンを押し始めてからの経過時間を計測するようにしています。

結構オーソドックスなやり方にはなると思いますが、問題なく動くと思うので、ご確認ください！

まとめ

ということで、今回は短めですが、JavaScriptでボタンの長押し判定を実装する方法についてご紹介させていただきました！

arrown39