Related Articles

Related Articles

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :