diff --git a/platform/mv3/extension/js/tool-overlay-ui.js b/platform/mv3/extension/js/tool-overlay-ui.js index 423154ee5..4259a9ef1 100644 --- a/platform/mv3/extension/js/tool-overlay-ui.js +++ b/platform/mv3/extension/js/tool-overlay-ui.js @@ -48,9 +48,8 @@ export const toolOverlay = { }; this.moveable = qs$('aside:has(#move)'); if ( this.moveable !== null ) { - dom.on('aside #move', 'pointerdown', ev => { - this.mover(ev); - }); + dom.on('aside #move', 'pointerdown', ev => { this.mover(ev); }); + dom.on('aside #move', 'touchstart', this.eatTouchEvent); } this.onMessage({ what: 'startTool', url: msg.url, @@ -180,7 +179,10 @@ export const toolOverlay = { this.moverCX0 = rect.x + rect.width / 2; this.moverCY0 = rect.y + rect.height / 2; dom.cl.add(this.moveable, 'moving'); - self.addEventListener('pointermove', this.moverMoveAsync, { capture: true }); + self.addEventListener('pointermove', this.moverMoveAsync, { + passive: true, + capture: true, + }); self.addEventListener('pointerup', this.moverStop, { capture: true, once: true }); ev.stopPropagation(); ev.preventDefault(); @@ -209,7 +211,6 @@ export const toolOverlay = { } }, moverMoveAsync(ev) { - if ( toolOverlay.moverTimer !== undefined ) { return; } if ( toolOverlay.moverIsTouch ) { const touch = ev.touches[0]; toolOverlay.moverX1 = touch.pageX; @@ -218,6 +219,7 @@ export const toolOverlay = { toolOverlay.moverX1 = ev.pageX; toolOverlay.moverY1 = ev.pageY; } + if ( toolOverlay.moverTimer !== undefined ) { return; } toolOverlay.moverTimer = self.requestAnimationFrame(( ) => { toolOverlay.moverMove(); }); @@ -225,11 +227,19 @@ export const toolOverlay = { moverStop(ev) { if ( dom.cl.has(toolOverlay.moveable, 'moving') === false ) { return; } dom.cl.remove(toolOverlay.moveable, 'moving'); - self.removeEventListener('pointermove', toolOverlay.moverMoveAsync, { capture: true }); + self.removeEventListener('pointermove', toolOverlay.moverMoveAsync, { + passive: true, + capture: true, + }); ev.target.releasePointerCapture(ev.pointerId); ev.stopPropagation(); ev.preventDefault(); }, + eatTouchEvent(ev) { + if ( ev.target !== qs$('aside #move') ) { return; } + ev.stopPropagation(); + ev.preventDefault(); + }, moveable: null, moverIsTouch: false, moverX0: 0, moverY0: 0,