Post
Ask Question

Touch Events in Windows 8 Using Html5 and JavaScript

Introduction

 
In this article, we explain the touch events in a Windows 8 Metro application with the help of HTML 5 and JavaScript. Here, we present a simple example which contains different points. In each point, we have to display the different touch events. We have to use a pointerEventListener function and use a different canvas.
 
Here we have to explain the different touch events features in this application with the help of this example.
 
So, we have to follow these steps as given below.
 
Step 1
 
First of all, you have to create a new Metro Style Application; let us see the description with images of how you will create it. 
  • Open Visual Studio 2011
  • File>New>Project
  • Choose Template>JavaScript> Blank Application
  • Rename this Application

homepage.gif
 
Step 2
 
In the Solution Explorer, there are two files that we will primarily work with; .js and .html files. In the images, the folder adds any image in this application.
 
solutionexplorer.gif
 
Step 3
 
In this application we use canvases.
 
Code
  1. <div id="column2">  
  2.    <canvas class="touchCanvas" id="touchCanvas"></canvas>  
  3.    <canvas class="setPointerCanvas" id= "setPointerCanvas"></canvas>  
  4.    <canvas class="touchGesturesCanvas" id="touchGesturesCanvas"></canvas>  
  5.    <canvas class="multiTouchCanvas" id="multiTouchCanvas"></canvas>  
  6. </div>   
Step 4
 
The default.html page contains this body with the following code as below.
 
Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <title>Touch Events</title>  
  5.       <!-- WinJS references -->  
  6.       <link href="winjs/css/ui-light.css" rel="stylesheet" type="text/css" />  
  7.       <script type="text/javascript" src="WinJS/js/base.js"></script>  
  8.       <script type="text/javascript" src="WinJS/js/ui.js"></script>  
  9.       <script type="text/javascript" src="WinJS/js/wwaapp.js"></script>  
  10.       <!-- Base references -->  
  11.       <link rel="stylesheet" type="text/css" href="css/base-sdk.css" />  
  12.       <script type="text/javascript" src="base-sdk.js"></script>   
  13.       <!-- Sample references -->  
  14.       <link rel="stylesheet" type="text/css" href="css/program.css" />  
  15.       <script type="text/javascript" src="program.js"></script>  
  16.    </head>  
  17.    <body role="application" style="background-color:#f2c8c8">  
  18.       <div id="rootGrid">  
  19.          <div id="header" role="contentinfo"></div>  
  20.          <div id="content">  
  21.             <h1 id="featureLabel">Touch Events</h1>  
  22.             <h2 id="inputLabel">Input</h2>  
  23.             <div id="input" role="main" aria-labelledby="inputLabel">  
  24.                <div class="options">  
  25.                   <h3 id="listLabel">Select</h3>  
  26.                   <select size="4" id="scenarios" aria-labelledby="listLabel" style="background-color:#ff6a00">  
  27.                      <option selected="selected" value="1">1) Pointer Events</option>  
  28.                      <option value="2">2) Gestures Events</option>  
  29.                      <option value="3">3) Multitouch Pointer Events</option>  
  30.                      <option value="4">4) Pointer Capture</option>  
  31.                   </select>  
  32.                </div>  
  33.                <div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">  
  34.                   <h3 id="descLabel">Description</h3>  
  35.                   <!-- For 1 Input -->  
  36.                   <div class="item" id="scenario1Input">  
  37.                      <p>This point describes how to register for touch pointer events.</p>  
  38.                      <button class="action" id="scenario1Clear" style="color:#f00">Clear Messages</button>  
  39.                      <br /><br />  
  40.                   </div>  
  41.                   <!-- For 2 Input -->  
  42.                   <div class="item" id="scenario2Input">  
  43.                      <p>This point describes how to register gesture events.</p>  
  44.                      <button class="action" id="ButtonClearEvents2" style="color:#f00">Clear Messages</button>  
  45.                   </div>  
  46.                   <!-- For 3 Input -->  
  47.                   <div class="item" id="scenario3Input">  
  48.                      <p>This point describes how to capture multitouch input to a canvas element.</p>  
  49.                      <button id="scenario3Clear" class="action" style="color:#f00">Clear Messages</button>  
  50.                   </div>  
  51.                   <!-- For 4 Input -->  
  52.                   <div class="item" id="scenario4Input">  
  53.                      <p>This point describes how to capture a pointer to an element.   
  54.                         Once the pointer is captured, all subsequent events related to that pointer will be sent to this element, even if the pointer action takes places outside the element.  
  55.                      </p>  
  56.                      <button id="scenario4Clear" class="action" style="color:#f00">Clear Messages</button>  
  57.                   </div>  
  58.                </div>  
  59.             </div>  
  60.             <h2 id="outputLabel">Output</h2>  
  61.             <div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">  
  62.                <div id="statusMessage"></div>  
  63.                <div id="column1">  
  64.                   <!-- For 1 Output -->  
  65.                   <div class="item" id="scenario1Output" >  
  66.                      <div class="outputevents" id="outputEvents1">  
  67.                         <p>Touch events will be listed here.</p>  
  68.                      </div>  
  69.                   </div>  
  70.                   <!-- For 2 Output -->  
  71.                   <div class="item" id="scenario2Output" >  
  72.                      <div class="outputevents" id="outputEvents2">  
  73.                         <p>Touch events will be listed here.</p>  
  74.                      </div>  
  75.                   </div>  
  76.                   <!-- For 3 Output -->  
  77.                   <div class="item" id="scenario3Output" >  
  78.                      <div class="outputevents" id="outputEvents3">  
  79.                         <p>Touch events will be listed here.</p>  
  80.                      </div>  
  81.                   </div>  
  82.                   <!-- For 4 Output -->  
  83.                   <div class="item" id="scenario4Output">  
  84.                      <div class="outputevents" id="outputEvents4">  
  85.                         <p>Touch events will be listed here.</p>  
  86.                      </div>  
  87.                   </div>  
  88.                </div>  
  89.                <div id="column2">  
  90.                   <canvas class="touchCanvas" id="touchCanvas"></canvas>  
  91.                   <canvas class="setPointerCanvas" id= "setPointerCanvas"></canvas>  
  92.                   <canvas class="touchGesturesCanvas" id="touchGesturesCanvas"></canvas>  
  93.                   <canvas class="multiTouchCanvas" id="multiTouchCanvas"></canvas>  
  94.                </div>  
  95.             </div>  
  96.          </div>  
  97.       </div>  
  98.    </body>  
  99. </html>   
Step 5
 
In the js file, we have some changes in this application. So, the code (shown below) will be like:
 
Code
 
program.js file.
  1. (function () {  
  2.      function initialize() {  
  3.         scenarios.addEventListener("change", onScenarioChanged, false);  
  4.         // Scenario 1  
  5.         scenario1Clear.addEventListener("click", scenario1ClearMessageWindow, false);  
  6.         touchCanvas.style.display = "block";  
  7.         // Add Touch Event Listeners  
  8.         var target = document.getElementById("touchCanvas");  
  9.         target.addEventListener("MSPointerDown", pointerEventListener, false);  
  10.         target.addEventListener("MSPointerUp", pointerEventListener, false);  
  11.         target.addEventListener("MSPointerMove", pointerEventListener, false);  
  12.         target.addEventListener("MSPointerOver", pointerEventListener, false);  
  13.         target.addEventListener("MSPointerOut", pointerEventListener, false);  
  14.     // Scenario 1   
  15.     // Output Touch Event Details  
  16.     function pointerEventListener(evt) {  
  17.        var str = "Event " + evt.type + " at " + evt.clientX +   
  18.            ", " + evt.clientY + " for pointer ID " + evt.pointerId + "<br/>";  
  19.        outputEvents1.innerHTML = str + outputEvents1.innerHTML;  
  20.     }  
  21.     // Clear output field for Scenario 1  
  22.     function scenario1ClearMessageWindow() {  
  23.         outputEvents1.innerHTML = "<p>Touch events will be listed here.</p>";  
  24.   }  
Step 6
 
After running this application we get the following output.
 
output.gif
 
The first point describes how to register for touch pointer events. The clear button is used for clearing the text message in the text box.
 
output1.gif
 
In the gesture events movement on the mouse click.
 
output2.gif
 
The third point describes how to capture multitouch input to a canvas element. The multitouch pointer-events effect anywhere on the mouse movement click.
 
output3.gif
 
In the last point, a pointer captures a pointer to an element. Once the pointer is captured, all subsequent events related to that pointer will be sent to this element, even if the pointer action takes place outside the element The touch effect is presented on a mouse move.
 
output4.gif
 

Summary 

 
In this article, we learned about Touch Events in Windows 8 Using Html5 and JavaScript. 


Similar Articles