javascriptでクリックやタップの長押し処理をする方法

はじめに

散々出尽くされていると思いますが備忘録として残しておきます。極力シンプルな方法かつPCとスマホ両対応のつもりです。

実装例

クリック押しっぱなしで数値が加算され続けます。

See the Pen Untitled by rahhi555 (@rahhi555) on CodePen.

コード解説

html

<p id="target">0</p>

<!--
touch-action: none; スマホでタップしたままスワイプするとpointerupイベントが発生しない現象の防止
user-select: none;　及び oncontextmenu="return false;" 長押し時のポップアップ停止
-->

<button
        id="btn" 
        style="touch-action: none; user-select: none;"
        oncontextmenu="return false;">
  クリック
</button>

javascript

/**
* 押下時にインクリメントし続ける処理を登録し、解放時に登録した処理を削除する 
*/
document.getElementById('btn').addEventListener('pointerdown', () => {
  const intervalId = setInterval(increment, 50)

  // document要素にイベント登録することで、クリックした後ボタンから動かしてもOK
  // once: true を指定して一度発火したらイベントを削除する
  document.addEventListener('pointerup', () => {        
    clearInterval(intervalId)
  }, { once: true })
})


const increment = () => {
// インクリメント処理は記事の趣旨と関係ないので省略

あとがき

スマホの動作はchrome dev toolsで確認しただけなので、実機だと不具合があるかもしれません。