はじめに
散々出尽くされていると思いますが健忘録として残しておきます。極力シンプルな方法かつ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で確認しただけなので、実機だと不具合があるかもしれません。
↧