How to Use jQuery Touch Events Plugin for Mobiles?
In the creation of dynamic responsive websites, the developer needs to handle mobile gestures as well like pinching, tapping, and swiping. These gestures are handled by mobile development languages like “flutter” or “react native” and JavaScript. Other web programming does not handle this sort of event. Luckily! With the help of jQuery’s “touch event” plugin, these events or gestures can also be handled.
This blog will illustrate the process to use the jQuery touch event plugin for mobiles.
How to Use the jQuery Touch Events Plugin for Mobiles?
jQuery abstracts the differences between touch events and mobile events to use consistent APIs or plugins like “touch event”. There are several events provided by this plugin which are stated below in the tabular form:
|
Touch Event |
Explanation |
| tapstart | Invoke a function as the user touches an element |
| tapend | Perform specific tasks when the user unselects the element or releases his fingers from an element. |
| tap | Just like clicking, when the user touches and releases the element. |
| tapmove | Perform tasks when the user moves the pointer or finger over an element. |
| singletap | When the user performs a tap or clicks one time. |
| doubletap | When the user performs a tap or clicks an element two times within a “500” millisecond time period. |
| taphold | Perform tasks when a user taps and holds the element for more than “750” milliseconds. |
| swipe | Execute a line of code when a user swipes or moves their fingers over the element in any direction. |
| swipedown | Invokes a function when the user swipes or moves their fingers in a downward direction over an element. |
| swipeleft | When the user swipes or moves their fingers in the left direction over a selected element. |
| swipeup | When the user swipes or moves their fingers in the upward direction on the element. |
| swiperight | When a user swipes or moves their fingers in the right direction on the selected element. |
| swipeend | Invokes a specific function at the end of the swipe over an element. |
| scrollstart | Invokes a specific function at the start of the scrolling on the selected element. |
| scrollend | Invokes a specific function at the end of the scrolling on the element. |
| orientationchange | Fires a function when the orientation of the device or mobile gets changed like moving in the portrait from the landscape layout. |
Syntax
The syntax for jQuery touch events is stated below:
//your code
})
In the above syntax:
-
- The “sel” is the selector which is an action as an action caller or selected element.
- The “touchEvent” is the specific event name that is being used, it can event from the above-stated table.
- The “func()” is the custom function that is going to be executed by the provided touch event.
Now, let’s visit a couple of examples for a better understanding of touch events.
Example 1: Use of Tap and DoubleTap
In this example, the “touchEvent” event “tap” and “doubletap” is going to be used to invoke or perform some function over a selected element:
<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/2.0.3/jquery.mobile-events.min.js">
</script>
</head>
<body>
<h3 style="color: cadetblue;"> Linuxhint </h3>
<button id = "t"> Tap </button>
<button id = "dt"> Double tap </button>
<p id ="target"> The DoubleTap and Tap Touch Events Example. </p>
<script>
$('#t').tap(function() {
$('#target').hide();
})
$('#dt').doubletap(function() {
$('#target').show();
})
</script>
</body>
</html>
The explanation of the above code:
-
- First, the CDN “Content Delivery Network” for jQuery and touch events is going to be inserted inside the “<head>” tag to make them accessible. The CDNs can be found on the official website of jQuery and via visiting the cdnjs website respectively.
- Next, two button elements are created with an id of “t” and “dt”. Also, create a “p” element with an id of “target”. The action by the touch event is going to be performed on this element.
- Inside the “<script>” tag, select the element with an id of “t” and attach the “tap” touch event with it. This event selects another html element with an id of “target” and applies the “hide()” method on it.
- Moreover, select the “dt” element and apply the “doubletap” touch event and in the same manner apply the “show()” method on the “target” id element.
The output generated after the compilation of code is shown below:
The above output shows that the actions have been performed on “tap” and “doubletap” touch events.
Example 2: Use of Swipe and Swipeend Touch Events
In this example, the implementation of the “swipe” and “swipeend” touch events are going to be demonstrated:
$('#t').swipe(function() {
$('#target').hide();
})
$('#t').swipeend(function() {
$('#target').hide();
})
</script>
The description of the above jQuery code is as follows:
-
- First, the chosen element is selected via its id “t” and the “swipe” event is attached to it. This event fires a function and the fired function selects the targeted element via the id “target” and applies the “hide()” method on it to make its content invisible.
- Next, the “swipeend” event is applied on the same element and its function applied the “show()” method over the selected element with an id of “target” to make the content visible when the swipe event ends.
The output for the above code gets generated as:
The output shows that targeted element content gets hidden at the time of swipe and appears when the swipe event gets ended.
Example 3: Use of scrollstart and scrollend Touch Events
In this case, the “scrollstart” and “scrollend” touch events are going to be implemented:
$('#t').scrollstart(function() {
$('#target').hide();
})
$('#t').scrollend(function() {
$('#target').show();
})
</script>
The explanation for the above code is stated as:
-
- The only change in this example is the use of “scrollstart” and “scrollend” events to perform “hide()” and “show()” methods over an element and the rest of the code will remain the same as in the above example.
- The targeted text gets hidden at the start or during scrolling and it gets visible when the scrolling gets ended.
The output generated after the compilation of the above code is shown below:
The output shows that element content is hidden at the time of scrolling and it gets visible when the scrolling gets ended.
This blog has explained the jQuery touch event plugins for mobile devices.
Conclusion
The jQuery “touch event” plugin for mobile, allows jQuery to add events that specifically handle the events occurring on touch mobiles like swiping, tapping, orientation change, etc. The events provided by this plugin are implemented just like traditional “onclick” or other events. By using this plugin, the developer can easily apply certain functions according to the user interaction with the mobile. This blog has explained the jQuery touch event plugging for mobile.
Source: linuxhint.com