From 4da99ef04bd8726a4163e3197fca7f877792b91a Mon Sep 17 00:00:00 2001 From: Uwe Oestermeier Date: Wed, 15 Feb 2023 15:11:12 +0100 Subject: [PATCH] Added new configuration flag and default behavior that prevents pointer click events which might lead to conflicts in touch applications. --- lib/interaction.js | 62 +++++++++++++++++++++++++++++----------------- package-lock.json | 4 +-- 2 files changed, 41 insertions(+), 25 deletions(-) diff --git a/lib/interaction.js b/lib/interaction.js index dac95ac..ebecbaf 100755 --- a/lib/interaction.js +++ b/lib/interaction.js @@ -553,7 +553,8 @@ export class InteractionDelegate { useCapture = true, capturePointerEvents = true, cancelOnWindowOut = true, - debug = false, + preventPointerClicks = true, + debug = false } = {} ) { this.debug = debug @@ -564,6 +565,7 @@ export class InteractionDelegate { this.useCapture = useCapture this.capturePointerEvents = capturePointerEvents this.cancelOnWindowOut = cancelOnWindowOut + this.preventPointerClicks = preventPointerClicks this.setupInteraction() } @@ -589,14 +591,14 @@ export class InteractionDelegate { if (this.debug) console.log('Pointer API' + window.PointerEvent) element.addEventListener( 'pointerdown', - (e) => { + e => { if (this.debug) console.log('pointerdown', e.pointerId) if (this.capture(e)) { if (this.capturePointerEvents) { try { element.setPointerCapture(e.pointerId) } catch (e) { - console.warn('Cannot setPointerCapture') + console.warn('Cannot setPointerCapture', e.setPointerCapture) } } this.onStart(e) @@ -606,7 +608,7 @@ export class InteractionDelegate { ) element.addEventListener( 'pointermove', - (e) => { + e => { if (this.debug) console.log('pointermove', e.pointerId, e.pointerType) if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) { @@ -619,7 +621,7 @@ export class InteractionDelegate { ) element.addEventListener( 'pointerup', - (e) => { + e => { if (this.debug) console.log('pointerup', e.pointerId, e.pointerType) this.onEnd(e) if (this.capturePointerEvents) { @@ -634,7 +636,7 @@ export class InteractionDelegate { ) element.addEventListener( 'pointercancel', - (e) => { + e => { if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType) this.onEnd(e) if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId) @@ -645,7 +647,7 @@ export class InteractionDelegate { if (!this.capturePointerEvents) { element.addEventListener( 'pointerleave', - (e) => { + e => { if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType) if (e.target == element) this.onEnd(e) }, @@ -656,7 +658,7 @@ export class InteractionDelegate { if (!this.capturePointerEvents) { element.addEventListener( 'pointerout', - (e) => { + e => { if (this.debug) console.log('pointerout', e.pointerId, e.pointerType) if (e.target == element) this.onEnd(e) }, @@ -667,7 +669,7 @@ export class InteractionDelegate { if (this.cancelOnWindowOut) { window.addEventListener( 'pointerout', - (e) => { + e => { if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target) if (e.target == element) { this.onEnd(e) @@ -680,7 +682,7 @@ export class InteractionDelegate { if (this.debug) console.log('Touch API') element.addEventListener( 'touchstart', - (e) => { + e => { if (this.debug) console.log('touchstart', this.touchPoints(e)) if (this.capture(e)) { for (let touch of e.changedTouches) { @@ -692,7 +694,7 @@ export class InteractionDelegate { ) element.addEventListener( 'touchmove', - (e) => { + e => { if (this.debug) console.log('touchmove', this.touchPoints(e), e) for (let touch of e.changedTouches) { this.onMove(touch) @@ -705,7 +707,7 @@ export class InteractionDelegate { ) element.addEventListener( 'touchend', - (e) => { + e => { if (this.debug) console.log('touchend', this.touchPoints(e)) for (let touch of e.changedTouches) { this.onEnd(touch) @@ -715,7 +717,7 @@ export class InteractionDelegate { ) element.addEventListener( 'touchcancel', - (e) => { + e => { if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length) for (let touch of e.changedTouches) { this.onEnd(touch) @@ -728,7 +730,7 @@ export class InteractionDelegate { element.addEventListener( 'mousedown', - (e) => { + e => { if (this.debug) console.log('mousedown', e) if (this.capture(e)) { this.onStart(e) @@ -738,7 +740,7 @@ export class InteractionDelegate { ) element.addEventListener( 'mousemove', - (e) => { + e => { // Dow we only use move events if the mouse is down? // HOver effects have to be implemented by other means // && Events.isMouseDown(e)) @@ -752,7 +754,7 @@ export class InteractionDelegate { ) element.addEventListener( 'mouseup', - (e) => { + e => { if (this.debug) console.log('mouseup', e) this.onEnd(e) }, @@ -762,7 +764,7 @@ export class InteractionDelegate { if (!this.capturePointerEvents) { element.addEventListener( 'mouseout', - (e) => { + e => { if (e.target == element) { this.onEnd(e) console.warn("Shouldn't happen: mouseout ends interaction") @@ -774,7 +776,7 @@ export class InteractionDelegate { if (this.cancelOnWindowOut) { window.addEventListener( 'mouseout', - (e) => { + e => { if (e.target == element) { this.onEnd(e) } @@ -783,6 +785,20 @@ export class InteractionDelegate { ) } } + + if (this.preventPointerClicks) { + window.addEventListener( + 'click', + e => { + if (e instanceof PointerEvent) { + console.warn('Prevented pointer click') + e.preventDefault() + e.stopImmediatePropagation() + } + }, + true + ) + } } isDescendant(parent, child) { @@ -968,7 +984,7 @@ export class InteractionMapper extends InteractionDelegate { useCapture = true, capturePointerEvents = true, mouseWheelElement = null, - logInteractionsAbove = 12, + logInteractionsAbove = 12 } = {} ) { super(element, target, { @@ -976,7 +992,7 @@ export class InteractionMapper extends InteractionDelegate { useCapture, capturePointerEvents, longPressTime, - mouseWheelElement, + mouseWheelElement }) this.logInteractionsAbove = logInteractionsAbove } @@ -1132,7 +1148,7 @@ export class InteractionMapper extends InteractionDelegate { hammer.get('tap').set(opts) } - hammer.on(type, (event) => { + hammer.on(type, event => { cb(event) }) @@ -1146,7 +1162,7 @@ export class InteractionMapper extends InteractionDelegate { } } else { for (let j = 0; j < elements.length; j++) { - Hammer.on(elements[j], type, (event) => { + Hammer.on(elements[j], type, event => { cb(event) }) } @@ -1177,7 +1193,7 @@ export class InteractionMapper extends InteractionDelegate { if (Hammer.__hammers.has(element)) { const elementHammers = Hammer.__hammers.get(element) - elementHammers.forEach((it) => it.destroy()) + elementHammers.forEach(it => it.destroy()) Hammer.__hammers.delete(element) } } diff --git a/package-lock.json b/package-lock.json index c383050..46fdac6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "iwmlib", - "version": "2.0.0-beta.0", + "version": "2.0.0-beta.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "iwmlib", - "version": "2.0.0-beta.0", + "version": "2.0.0-beta.1", "license": "LGPL-3.0-or-later", "dependencies": { "gsap": "^2.1.3",