Added new configuration flag and default behavior that prevents pointer click events which might lead to conflicts in touch applications.
This commit is contained in:
parent
7f1a3aae8e
commit
4da99ef04b
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user