Kendo Mobile - Touch

by kendomobile

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<!-- Demo created for the book: Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API.
http://www.packtpub.com/building-mobile-applications-with-kendoui-html5/book -->

<div data-role="view" data-init="viewInit">
        <div id="touchableDiv"
            style="height: 200px; width: 200px;
                   background-color: darkgreen;">

            <div style="height: 100px; width: 100px;
                 background-color: white;"
                id="innerDiv">
            </div>
        </div>
    
    <br/>
    <div style="color:blue">Console output: </div>
    <div  id="output" > </div>
    </div>

CSS

.km-scrollview > div > [data-role=page] {
            /*This is to preserve whitespace. 
             Text will wrap when necessary, and on line breaks*/
            white-space: pre-wrap;
            /*normal can also be used instead of pre-wrap*/
        }

JavaScript

var app = new kendo.mobile.Application(document.body);
        function viewInit(e) {

            $('#touchableDiv').kendoTouch({

                tap: handleTouchEvent,
                doubletap: handleTouchEvent,
                hold: handleTouchEvent,
                touchstart: handleTouchEvent,
                touchend: handleTouchEvent,
                dragstart: handleTouchEvent,
                dragend: handleTouchEvent
            });
        }

        function handleTouchEvent(e) {
            output(e);

            //Touch properties

            //id of the actual HTML element
            //which was touched. if we touch the div
            //with id innerDiv, output will be 'innerDiv'
           output("actual touch on: " +
                e.touch.initialTouch.id);

            //parent touch widget which was touched.
            output("current target id: " + 
                e.touch.currentTarget.id);
            //Touch offset relative to the entire document 
            output("x.location: " + e.touch.x.location +
                " y.location: " + e.touch.y.location);
            //Touch offset relative to the viewport
            output("x.client: " + e.touch.x.client +
                " y.client: " + e.touch.y.client);
            //Velocity of the touch event in pixels per millisecond.
            output("x.velocity: " + e.touch.x.velocity +
                " y.velocity: " + e.touch.y.velocity);

            //Epoch timestamp
           output("x.timeStamp: " + e.touch.x.timeStamp +
                " y.timeStamp: " + e.touch.y.timeStamp);

            //Event Properties
            output("Event Type: " + e.event.type);
        }


        function output(data){
            $("#output").append(data);
            $("#output").append("<br/>");    
        }