Gesture phase event

4

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:
DragGestureOutput.hype.zip (121.8 KB)

It gets a little ‘inception’-ey, since the document is placed in itself within an iframe for testing the ‘cancel’ event: http://tumult.com/support/examples/7622-phase-gesture/DragGestureOutput.html

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:
//hypeDocument.kHypeGesturePhaseStart
//hypeDocument.kHypeGesturePhaseMove
//hypeDocument.kHypeGesturePhaseEnd
//hypeDocument.kHypeGesturePhaseCancel
// 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>');
}

2 Likes