Detect input pointer device in Windows Store App


The Windows Store Application can run in any Windows 8 supported devices. Such as in Win8 desktops, Surface Tablets, touch sensitive devices etc.

In the desktop environment, to perform operations like button clicks etc we need to use the MOUSE as the input pointer device.

In tablet or touch sensitive devices to perform such operation we need to use the FINGER TOUCH as the input pointer. Also we can use PENs to perform the touch operation.

Let’s assume a scenario where we need to program on basis of the pointer device used in the application. Below is one of the example to detect the pointer device.


In the below example we are trying to sense the pointer device.

Html file contect

   <span class="spnTouch" id="spnDevice">Touch/Click Me</span>
  <img id="imgDevice" alt="" />

We have taken a SPAN which will sense the device on click. The IMG control will display the image of the pointing device. Such as, on click of mouse it will display a mouse image, on touch it will display a touch finger image etc. Just make it a bit fancy 🙂

CSS file contect

font:bold 20px verdana;

Just to make the span appear a bit bigger on screen.

JS file contect

var spnDevice = document.getElementById("spnDevice");
 spnDevice.innerHTML = "No device detected yet.";

 var imgdevice = document.getElementById("imgDevice");
 spnDevice.addEventListener("MSPointerDown", function (evt) {
 var pointerDevice = Windows.UI.Input.PointerPoint.getCurrentPoint(evt.pointerId);
     switch (pointerDevice.pointerDevice.pointerDeviceType) {
                case Windows.Devices.Input.PointerDeviceType.mouse:
                    spnDevice.innerHTML = "Mouse detected";
                    imgdevice.src = "images/Mouse.jpg";
                case Windows.Devices.Input.PointerDeviceType.touch:
                    spnDevice.innerHTML = "Touch detected";
                    imgdevice.src = "images/Touch.jpg";
                case Windows.Devices.Input.PointerDeviceType.pen:
                    spnDevice.innerHTML = "Pen detected";
                    imgdevice.src = "images/Pen.jpg";
                    spnDevice.innerHTML = "No device detected yet.";
                    imgdevice.src = "";

In the JS part, we are sensing the device on click of the SPAN and displaying the image basing upon the device sensed.


This blog demonstrates how to sense the input device inside an application. Although the usage being shown here may not be the exact one it is meant for but certainly it tries to demonstrate the way it can be done.

Thanks !!

Written By: Nirmal Hota, Cross-Platform Mobile Lead, Mindfire Solutions

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s