How to use jQuery touch events plugin for mobiles?

jQuery Web Development Front End Technology

JavaScript and jQuery contain various plugins, and every plugin contains a couple of functions. JavaScript plugin works as a library, and we can use its code directly in our code.

The jQuery touch event plugin is also a library used to detect touch events in mobile devices and execute some functions when a touch event occurs. Using the CDN, we can add the jQuery touch event plugin to the HTML. If users are working with the Node application, they should execute the below command in the project directory to add the jQuery touch events plugin to the application.

npm i jquery-touch-events

Here, we will learn to use the different JQuery touch events plugin methods via different examples.

Syntax

Users can follow the syntax below to use the methods of the JQuery touch events plugin.

$('Selector').tap( () => {
   $('#display').show();
})

In the above syntax, ‘selector’ is a CSS selector to select the element to add a particular event. Here, we have added the tap() method.

Example

In the example below, we have used the tap() method of the JQuery touch events plugin. We have added the Jquery and JQuery touch event’s CDN to the <head> tag.

In the HTML, we have created the <p> tag with an id equal to the ‘tap’. In the JQuery, we have accessed the element with an id equal to the ‘tap’ and added the tap() event by taking it as a reference.

We have added the callback function as a parameter of the tap() method. It changes the div's display which has id equal to the ‘display’ when the user taps the text.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js"> </script>
</head>
<body>
   <h3>Using the <i> tap() method of JQuery touch events plugin </i> to detect tap event</h3>
   <p id = "tap"> Click Me! </p>
   <p id = "display" style = "display:none">
      You tapped the above text!
   </p>
   <script>
      $('#tap').tap(function (e) {
         $('#display').show();
      })
   </script>
</body>
</html>

Example

In the example below, we have used the swipe() method of the JQuery touch events plugin to add the swipe event on a particular div. When the user swipes on the text, it displays the div with an id equal to the ‘display’.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js"> </script>
</head>
<body>
   <h3>Using the <i> swipe() method of JQuery touch events plugin </i> to detect the swipe event</h3>
   <p id = "tap"> Swipe Me! </p>
   <p id = "display" style = "display:none">
      You swiped the above text!
   </p>
   <script>
      $('#tap').swipe(function (e) {
         $('#display').show();
      })
   </script>
</body>
</html>

Example

In the example below, we have added the double-tap event to the code using the doubletap() method of the JQuery touch events plugin.

Double tap on the ‘Double Tap’ text in the output to see the outcomes.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
   <script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js"> </script>
</head>
<body>
   <h3>Using the <i> doubletap() method of JQuery touch events plugin </i> to detect the double tap event</h3>
   <button id = "btn"> Double tap </button>
   <p id ="display" style = "display:none">
      You double tapped the above button!
   </p>
   <script>
      $('#btn').doubletap(() => {
         $('#display').show();
      })
   </script>
</body>
</html>

Example

In the example below, we have used the touchstart() and touchend() methods to detect when the user starts the tap and ends the tap. We added two touch events to the single HTML element using the method chaining.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js"> </script>
</head>
<body>
   <h3>Using the <i> different methods of jQuery touch events plugin </i> to create a method chaining for the touch event </h3>
   <button id = "btn"> Tap Here </button>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      $('#btn').tapstart(() => {
         output.innerHTML += "Tap started on the button! <br>";
      }).tapend(() => {
         output.innerHTML += "Tap ended on the button! <br>";
      })
   </script>
</body>
</html>

Example

In the example below, we have used the scrollstart() and scrollend() methods to detect the scroll start and scroll end events, respectively. Users can scroll the div and observe that it prints the message when the user starts the scroll and ends the scroll event.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js"> </script>
   <style>
      .element {
         width: 500px;
         height: 200px;
         overflow: scroll;
         font-size: 5rem;
      }
   </style>
</head>
<body>
   <h3>Using the <i> scrollstart() and scrollend() methods </i> to detect the scroll events</h3>
   <div class = "element"> Hello world! This is a sample div. </div>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      $('.element').scrollstart(() => {
         output.innerHTML += "Tap started on the button! <br>";
      }).scrollend(() => {
         output.innerHTML += "Tap ended on the button! <br>";
      })
   </script>
</body>
</html>

Users learned to use various methods of JQuery touch event plugins in this tutorial. Users need to access the HTML element using the CSS selector and execute any method by taking the element as a reference to add an event.