How to use jQuery touch events plugin for mobiles ?
Last Updated :
15 Oct, 2020
In this article, we will learn how to handle various touch events for mobile user interface designing using the jQuery Touch Events plugin which is completely based on JavaScript. These are additional events that can be used with the jQuery which are also compatible with desktop applications as well as mobile web apps.
Please download the required pre-compiled file from the link and save it in your working folder for implementation.
or
Use the following link in the head section of your HTML web page
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-
events.js”></script>
Example 1: The following code demonstrates the simple tap event by the user using the jQuery Touch Event plugin.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
</script>
<script src="jquery.mobile-events.min.js">
</script>
</head>
<body>
<h2>jQuery touch events</h2>
<p id="myeventID">Touch Me!</p>
<p id="response" style="display:none">
User tapped #myeventID
</p>
<script type="text/javascript">
/*S imple tap event */
$('#myeventID').tap(function (e) {
$('#response').show();
})
</script>
</body>
</html>
|
Output:
- Before touch event:
- After touch event: After the “Touch Me!” is tapped once, the following output is shown.
Example 2: The following code demonstrates the single tap as well as the double tap events by the user using double chaining of functions as shown below.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
</script>
<script src="jquery.mobile-events.min.js">
</script>
</head>
<body>
<h2>jQuery touch events</h2>
<p id="myeventID">Touch Me!</p>
<p id="response" style="display:none">
User tapped #myeventID</p>
<p id="doubletapMsg" style="display:none">
User double tapped #myeventID!</p>
<script type="text/javascript">
/* Double chaining of functions */
$('#myeventID').tap(function (e) {
console.log('User tapped #myeventID');
$('#response').show();
}).doubletap(function () {
$('#doubletapMsg').show();
})
</script>
</body>
</html>
|
Output: After the “Touch Me!” is tapped twice, the following output is shown.
Example 3: The following code demonstrates the tap start and tap end touch events when the user taps on the HTML controls.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
</script>
<script src="jquery.mobile-events.min.js">
</script>
</head>
<body>
<h2>jQuery tap start and end events</h2>
<p id="myeventID">Touch Me!</p>
<script type="text/javascript">
$("#myeventID").tapstart(function (e, touch) {
console.log('tap started!');
});
$("#myeventID").tapend(function (e, touch) {
console.log('tap end!');
});
</script>
</body>
</html>
|
Output: When the user taps the “Touch Me!” div, the following output is shown.
Example 4:The following code demonstrates the swipe event and swipe end events when the user swipes on the HTML control.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
</script>
<script src="jquery.mobile-events.min.js">
</script>
</head>
<body>
<h2>jQuery swipe events</h2>
<p id="myeventID">Touch Me!</p>
<script type="text/javascript">
$("#myeventID").swipeend(function (e, touch) {
console.log('Swipe event end!');
});
$("#myeventID").swipe(function (e, touch) {
console.log('Swiped by user!');
});
</script>
</body>
</html>
|
Output: When the user swipes the text on “Touch Me!” div, the following output is shown.
There are many more touch events handler functions along with data thresholds and utility functions available in the plugin. The developer can make use of them as per the application’s need.
Share your thoughts in the comments
Please Login to comment...