Making touch events accessible (Windows Store apps using JavaScript and HTML) (Windows)

2 out of 2 rated this helpful - Rate this topic

Because the Windows 8 new Windows UI was designed primarily for touch input, we recommend that you use touch events to ensure smooth UI flow and touch performance.

For technical reasons, touch events like MSPointerUp and MSPointerDown aren't programmatically accessible by default. To make them accessible, and to allow Narrator touch gestures to activate your app's functionality, add code to hook touch events to the click event, which is programmatically accessible by default.

JavaScript


element.addEventListener("click", onClick);
element.addEventListener("MSPointerUp", onMsPointerUp);

...

var pointerUpEventObject = null;
var pressedElement = null;
var isUiaClick = false;

function onClick(evt) {
    isUiaClick = true;
    delayedPointerUp();
}

function onMsPointerUp(evt) {
    pointerUpEventObject = evt;
    msSetImmediate(delayedPointerUp);
}

...

function delayedPointerUp() {
    if (isUiaClick || pointerUpEventObject && 
            (pointerUpEventObject.srcElement == pressedElement || 
            ...right button checks...)) {
        pointerUpEventObject = null;
        isUiaClick = false;
        invokeItem(pressedElement);
    }
}

...

Build date: 11/28/2012

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)