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);
