JavaScriptの長押しイベントを実装するコード生成ツール
左クリックやタップ長押しのイベントを実装するためのJavaScriptコードを生成します。長押しの時間設定や動作確認が可能です。
プレビュー
<button id="target" class="long-press-btn">
<span id="log">長押ししてください</span>
<span class="progress-bar"></span>
</button>.long-press-btn {
position: relative;
width: 200px;
height: 60px;
border: 2px solid #333;
background: #fff;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
#log {
z-index: 2;
font-weight: bold;
pointer-events: none;
}
/* プログレスバー */
.long-press-btn .progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
background-color: #00FA9A;
z-index: 1;
transition: none;
}
const target = document.getElementById('target');
const progressBar = target.querySelector('.progress-bar');
const log = document.getElementById('log');
// 変数
const longPressDuration = {{duration}}; // 長押し時間 (ms)
let timerId;
let isCompleted = false;
let preventDefault = {{prevent_default}};
// 長押し開始
function onStart(e) {
// 既に完了状態の場合は処理しない
if (isCompleted) {
return;
}
// マウスの右クリックは無視する
if (e.type === 'mousedown' && e.button !== 0) return;
// デフォルトイベントを破棄するかどうか（オプション）
if (preventDefault) {
e.preventDefault();
}
progressBar.style.transition = `width ${longPressDuration}ms linear`;
progressBar.style.width = '100%';
// 長押し完了した時の処理
timerId = setTimeout(() => {
log.innerText = '長押し完了！';
target.classList.add('completed');
isCompleted = true;
}, longPressDuration);
// ここに処理を追加する
}
// 長押しキャンセル処理
function onEnd(e) {
// 既に完了状態の場合は処理しない
if (isCompleted) {
return;
}
// 完了前に離した場合のキャンセル処理
clearTimeout(timerId);
progressBar.style.transition = 'none';
progressBar.style.width = '0%';
}
// イベントリスナー登録
target.addEventListener('mousedown', onStart);
target.addEventListener('mouseup', onEnd);
target.addEventListener('mouseleave', onEnd);
target.addEventListener('touchstart', onStart, { passive: false });
target.addEventListener('touchend', onEnd);
target.addEventListener('touchcancel', onEnd);
機能、使い方
- 長押し判定: 指定された時間（ミリ秒）ボタンを押し続けることでアクションを実行する機能を生成します。
- プログレス表示: 視覚的なフィードバックとして、長押しの進行状況をプログレスバーで可視化しています。
- モバイル・PC両対応:
mousedownだけでなくtouchstartイベントも考慮しており、マウスとタッチの両方で動作します。
実装のポイント
タイマー制御
setTimeoutを使用して長押しを判定しています。指やマウスを離した瞬間にclearTimeoutを呼ぶことで、誤操作を防ぎます。
preventDefault について
特にモバイル環境では、長押し時にコンテキストメニュー（右クリックメニュー）が出てしまうのを防ぐため、passive: false設定とあわせてデフォルト挙動を止める設定が推奨されます。
