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.
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:
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