Gesture phase event

(swagner) #1

How to cancel a gesture phase during the phase event ? What exactly mean the cancel event ?



Below is a thread on the Forum discussing PhaseCancel:

@Daniel - How are we coming with the additional documentation for PhaseCancel?

@stephen can speak more eloquently about this, as he put it together! Regardless, we should add more detail in our documentation for this.

(Hans-Gerd Claßen) #3

whatever will cause the HypeGesturePhaseCancel it’s an event that occurs and not something you can trigger.


I did a little digging into the code, and it appears that ‘cancel’ is only fired when a drag tries to leave the bounds of an iframe. Due to the way that mobile devices handle touch events, this is only firing on mouse-enabled browsers at the moment. A drag on a mobile device retains hold of the element (or drag phase state) until the touch event stops, and in that case the ‘PhaseEnd’ action occurs.

I made a quick testing document here: (121.8 KB)

It gets a little ‘inception’-ey, since the document is placed in itself within an iframe for testing the ‘cancel’ event:

When dragging the element, I run this function to output events into boxes:

//	These two area are receiving the event names:
var outputarea = hypeDocument.getElementById('output');
var outputareamove = hypeDocument.getElementById('outputareamove');

// We want to detect if any of these events have been triggered:
// if Event has been detected, write some text in the 'outputarea' element: 	
if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {
	outputarea.insertAdjacentHTML('beforeend', 'hypeDocument.kHypeGesturePhaseEnd<br>');
if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseStart) {
	outputarea.insertAdjacentHTML('beforeend', 'hypeDocument.kHypeGesturePhaseStart<br>');
if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseMove) {
	outputareamove.insertAdjacentHTML('beforeend', 'hypeDocument.kHypeGesturePhaseMove<br>');
if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseCancel) {
	outputarea.insertAdjacentHTML('beforeend', 'hypeDocument.kHypeGesturePhaseCancel<br>');

How can we use HypeGesturePhaseCancel

@Daniel - Thank You for the research & the demo!