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>
|
||||||
<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
@@ -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)); };
|
||||||
|
|||||||
Reference in new issue
Block a user