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:
1 parent
a47b2be177
commit
bd8919fb39
2 files changed
+19
-4
No files matched your search
+1
-1
@@ -436,7 +436,7 @@
|
||||
</div>
|
||||
<div class="progress-bar-wrap">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+18
-3
@@ -670,9 +670,24 @@ function _initBarScrub(bar, fill, onMove) {
|
||||
fill.style.transition = '';
|
||||
}
|
||||
}
|
||||
bar.addEventListener('touchstart', e => { startScrub(getPos(e.touches[0].clientX)); e.stopPropagation(); }, {passive:true});
|
||||
bar.addEventListener('touchmove', e => { if(S._scrubbing) moveScrub(getPos(e.touches[0].clientX)); }, {passive:true});
|
||||
bar.addEventListener('touchend', e => { if(S._scrubbing) endScrub(getPos(e.changedTouches[0].clientX)); }, {passive:true});
|
||||
// Touch: require ≥8px horizontal drag before committing to scrub.
|
||||
// A plain tap cancels cleanly without seeking.
|
||||
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 => {
|
||||
startScrub(getPos(e.clientX)); e.preventDefault();
|
||||
const mm = e2 => { if(S._scrubbing) moveScrub(getPos(e2.clientX)); };
|
||||
|
||||
Reference in new issue
Block a user