CODEWITHSUNDEEP
javascripttouchwindows-8
David Jacob
David Jacob

Reputation: 213

windows 8 metro style app - find mouse or touch based execution

I am creating one app for Windows 8 Metro style app using HTML 5 and JavaScript. I require to find at launch of the app whether it will be touch base process or mouse based process (smartphone or desktop computer).

I tried following things.

1) As per following, http://msdn.microsoft.com/en-us/library/windows/apps/windows.devices.input.pointerdevicetype.aspx

but we are not sure what to pass in as “pdt” in function getPointerDeviceType(pdt)

Tried various things but it return me “undefined” only.

2) We tried Modernizr js framework to find for following code

    if (Modernizr.touch){
       // bind to touchstart, touchmove, etc and watch `event.streamId`
    } else {
       // bind to normal click, mousemove, etc
    }

But when we insert the latest js code of “Modernizr”, it gives us security error for appendchild command. Something like “0x800c001c - JavaScript runtime error: Unable to add dynamic content.”

Can anyone please tell how we can achieve so that based on condition, we can execute code for touch based and mouse based execution of app.

Upvotes: 1

Views: 529

Answers (2)

David Jacob
David Jacob

Reputation: 213

Just got it solved. Can come useful for others.

I Put following code on which i need to find which css i need to apply.

    helloButton.addEventListener("MSPointerDown", buttonClickHandler, false);

Here is the function:

    function buttonClickHandler(eventInfo) {

        if (eventInfo.pointerType == eventInfo.MSPOINTER_TYPE_TOUCH) {
            // Do something for touch input only
            console.log('Touch');
        } else {
            // Do something for non-touch input
            console.log('Mouse');
        }
    }

You can set your code as per condition.

Upvotes: 1

Dominic Hopton
Dominic Hopton

Reputation: 7292

Your assumption that the app will only have one input type for the duration of execution is a bad one -- I change between mouse, keyboard, and touch on my devices all the time.

That stated:

  1. If you are dynamically adding Modernizr, just include the Modernizer as a script tag in your HTML rather than adding dynamically
  2. You need to use Windows.Devices.Input.PointerDevice.GetPointerDevices(); to get the devices, and then see which ones support touch using the function in the link you provided. (Details here)
  3. You can detect which type of device a specific input event was for (e.g. onmspointerup et al), by looking at the pointerType property on the event object.

Upvotes: 0

Related Questions