fix: prevent accidental seek on tap in mobile progress bar

Touch scrubbing now requires ≥8px horizontal drag before committing.
A plain tap on the progress bar is ignored — no unintentional position jump.
Also removed redundant onclick="seekTo()" since _initBarScrub already
handles mouse seeking via mousedown/mousemove/mouseup.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-05-17 21:05:55 +02:00
1 parent a47b2be177
commit bd8919fb39
2 files changed
+19 -4

No files matched your search

+1 -1
View File
@@ -436,7 +436,7 @@
</div> </div>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
<span class="progress-time" id="time-cur">0:00</span> <span class="progress-time" id="time-cur">0:00</span>
<div class="progress-bar" id="progress-bar" onclick="seekTo(event)"><div class="progress-fill" id="progress-fill"></div></div> <div class="progress-bar" id="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
<span class="progress-time right" id="time-total">0:00</span> <span class="progress-time right" id="time-total">0:00</span>
</div> </div>
</div> </div>
+18 -3
View File
@@ -670,9 +670,24 @@ function _initBarScrub(bar, fill, onMove) {
fill.style.transition = ''; fill.style.transition = '';
} }
} }
bar.addEventListener('touchstart', e => { startScrub(getPos(e.touches[0].clientX)); e.stopPropagation(); }, {passive:true}); // Touch: require ≥8px horizontal drag before committing to scrub.
bar.addEventListener('touchmove', e => { if(S._scrubbing) moveScrub(getPos(e.touches[0].clientX)); }, {passive:true}); // A plain tap cancels cleanly without seeking.
bar.addEventListener('touchend', e => { if(S._scrubbing) endScrub(getPos(e.changedTouches[0].clientX)); }, {passive:true}); let _touchStartX = 0, _touchMoved = false;
bar.addEventListener('touchstart', e => {
_touchStartX = e.touches[0].clientX;
_touchMoved = false;
e.stopPropagation();
}, {passive:true});
bar.addEventListener('touchmove', e => {
const dx = Math.abs(e.touches[0].clientX - _touchStartX);
if (!_touchMoved && dx >= 8) { _touchMoved = true; startScrub(getPos(e.touches[0].clientX)); }
if (_touchMoved && S._scrubbing) moveScrub(getPos(e.touches[0].clientX));
}, {passive:true});
bar.addEventListener('touchend', e => {
if (_touchMoved && S._scrubbing) endScrub(getPos(e.changedTouches[0].clientX));
else S._scrubbing = false;
_touchMoved = false;
}, {passive:true});
bar.addEventListener('mousedown', e => { bar.addEventListener('mousedown', e => {
startScrub(getPos(e.clientX)); e.preventDefault(); startScrub(getPos(e.clientX)); e.preventDefault();
const mm = e2 => { if(S._scrubbing) moveScrub(getPos(e2.clientX)); }; const mm = e2 => { if(S._scrubbing) moveScrub(getPos(e2.clientX)); };