Touchstart vs Click. What happens under the hood?

ONLINECAST

2 min read

·

07-09-2024

18

0

Share

Diving Deep into Touchstart: Why it Makes Your Mobile Apps Faster

Many mobile developers, especially those working with PhoneGap, know the frustration of sluggish performance on touch-sensitive devices. One common solution is to switch from the standard click event to touchstart. But why does this simple change lead to a noticeable improvement? Let's explore the workings of touchstart and understand how it optimizes mobile interaction.

The Original Problem:

A developer was struggling with sluggish performance in their PhoneGap application. They were using the click event for user interactions, which resulted in noticeable lag. After switching to the touchstart event, they experienced a significant improvement in performance. However, the developer was curious about the underlying mechanisms responsible for this improvement and sought an explanation beyond the W3C documentation.

The Original Code:

// Using click event
$(selector).click(function() {
  // Event handler logic here
});

// Using touchstart event
$(selector).bind("touchstart", function() {
  // Event handler logic here
});

Understanding the Difference

The key to understanding the performance difference lies in how the browser handles click and touchstart events. Here's a breakdown:

• Click Event: The click event is designed for traditional mouse-based interactions. On touch devices, the browser simulates a click event after a series of touch events occur:

  1. Touchstart: User starts touching the screen.
  2. Touchmove: User moves their finger across the screen.
  3. Touchend: User lifts their finger from the screen.
  4. Click: The browser simulates a click event based on the final touch coordinates.

• Touchstart Event: This event fires immediately upon the first touch contact. It doesn't wait for the entire touch sequence (touchstart, touchmove, touchend) before triggering the event handler. This direct response eliminates the delay caused by the browser's processing of the full touch sequence before simulating a click.

Practical Benefits of Touchstart:

• Faster Response Time: The immediate firing of touchstart makes your application feel more responsive, especially on slower devices where processing the entire touch sequence takes time.
• Improved User Experience: A faster response time translates to a smoother and more enjoyable user experience.
• Reduced Lag and Jitter: Eliminating the delay caused by the browser's click simulation reduces visual lag and jitter, improving the overall smoothness of your application's interaction.

Caveats:

While touchstart offers performance benefits, it's essential to be aware of some limitations:

• Multiple Touches: For applications that require multiple touch points (like pinch-to-zoom), you'll need to use additional touch events like touchmove and touchend to handle the complete interaction.
• Click Simulation: In some scenarios, the browser might still simulate a click event after a touchstart event, especially if the touch sequence involves significant movement.
• Browser Compatibility: Ensure that the browser you are targeting supports the touchstart event. Not all browsers support touch events consistently.

Conclusion:

Choosing the right event for your mobile application is crucial for optimizing performance and user experience. While click events are convenient for traditional mouse-based interactions, the immediate response of touchstart makes it the preferred choice for touch-sensitive devices. By understanding the differences in their behavior, you can choose the optimal event to ensure a smooth and responsive experience for your users.