The Touch widget

Kendo UI Mobile's Touch widget helps us make selected elements of the DOM sensitive to a user's touch. It's a very powerful component as we don't need to use Mobile widgets wherever actions need to be implemented for touch events. Just add data-role = "touch" on the HTML element and we are ready to trap events such as swipe, tap, double tap, hold, and more:

<div id="touchableDiv" data-role="touch"> </div>

Or

$("#touchableDiv").kendoTouch();

Now let's see how the touch events can be trapped and what kind of data we can extract on a touch-enabled div element with an inner div element. Every touch event handler receives an event object, and in this example, we are going to explore some important properties that can be retrieved from the event object.

Let's create the following HTML with a couple of div elements:

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