MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Edge Gestures
As we saw in Chapter 7, “Commanding UI,” you don’t need to do anything special for commands on the
app bar or navigation bar to appear: Windows automatically handles the edge swipe from the top and
bottom of your app, along with right-click, Win+Z, and the context menu key on the keyboard. That
said, you can detect when these events happen directly by listening for the starting, completed, and
canceled events on the Windows.UI.Input.EdgeGesture object: 48
var edgeGesture = Windows.UI.Input.EdgeGesture.getForCurrentView();
edgeGesture.addEventListener("starting", onStarting);
edgeGesture.addEventListener("completed", onCompleted);
edgeGesture.addEventListener("canceled", onCanceled);
With these, completed fires for all input types; the starting and canceled events occur only for
touch. Within these events, the eventArgs.kind property contains a value from the EdgeGesture-Kind
enumeration that indicates the kind of input that invoked the event. The starting and canceled events
will always have the kind of touch, obviously, whereas completed can be any touch, keyboard, or mouse:
function onCompleted(e) {
// Determine whether it was touch or keyboard invocation
if (e.kind === Windows.UI.Input.EdgeGestureKind.touch) {
id("ScenarioOutput").innerText = "Invoked with touch.";
}
else if (e.kind === Windows.UI.Input.EdgeGestureKind.mouse) {
id("ScenarioOutput").innerText = "Invoked with right-click.";
}
else if (e.kind === Windows.UI.Input.EdgeGestureKind.keyboard) {
id("ScenarioOutput").innerText = "Invoked with keyboard.";
}
}
The code above is taken from Scenario 1 of the Edge gesture invocation sample. In Scenario 2, the
sample also shows that you can prevent the edge gesture event from occurring for a particular element
if you handle the contextmenu event for that element and call eventArgs.preventDefault in your
handler. It does this for one element on the screen, such that right-clicking that element with the mouse
or pressing the context menu key when that element has the focus will prevent the edge gesture events:
document.getElementById("handleContextMenuDiv").addEventListener("contextmenu", onContextMenu);
function onContextMenu(e) {
e.preventDefault();
id("ScenarioOutput").innerText =
"The ContextMenu event was handled. The EdgeGesture event will not fire.";
}
48 As WinRT object events, these are subject to the considerations in “WinRT Events and removeEventListener” in Chapter 3.
370