Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use FastClick with jQuery Mobile the right way in HTML?
FastClick is a library that eliminates the 300ms delay on mobile browsers for touch events. However, jQuery Mobile provides a built-in solution with the vclick event that handles this automatically.
The Problem with Mobile Touch Delays
Mobile browsers introduce a 300ms delay between a touch event and the click event to detect double-taps. This creates a sluggish user experience on mobile web applications.
jQuery Mobile's Built-in Solution
jQuery Mobile includes virtual events like vclick that provide immediate response without the 300ms delay. This eliminates the need for external libraries like FastClick.
Using vclick Event
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile vclick</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<button id="myButton" data-role="button">Click Me</button>
<p id="result"></p>
</div>
</div>
<script>
$(document).on('vclick', '#myButton', function() {
$('#result').text('Button clicked at: ' + new Date().toLocaleTimeString());
});
</script>
</body>
</html>
Alternative Virtual Events
jQuery Mobile provides several virtual events for different touch interactions:
<script>
// Touch start
$(document).on('vmousedown', '#myButton', function() {
console.log('Touch started');
});
// Touch end
$(document).on('vmouseup', '#myButton', function() {
console.log('Touch ended');
});
// Tap event
$(document).on('tap', '#myButton', function() {
console.log('Button tapped');
});
</script>
Comparison: FastClick vs jQuery Mobile
| Approach | File Size | Setup Complexity | jQuery Mobile Integration |
|---|---|---|---|
| FastClick Library | ~10KB | Requires initialization | Additional dependency |
| jQuery Mobile vclick | Built-in | Simple event binding | Native integration |
Best Practices
When using jQuery Mobile, always prefer vclick over regular click events for buttons and interactive elements. Use event delegation for dynamically added content:
// Good: Event delegation with vclick
$(document).on('vclick', '.dynamic-button', function() {
// Handle click
});
// Avoid: Regular click events on mobile
$('.button').click(function() {
// Has 300ms delay on mobile
});
Conclusion
jQuery Mobile's vclick event provides an optimal solution for mobile touch handling without requiring external libraries like FastClick. It offers immediate response and seamless integration with jQuery Mobile components.
222 Views
