Stop pointercancel event from firing without disabling touch scrolling on Chrome Android?

Stop pointercancel Event from Firing Without Disabling Touch Scrolling on Chrome Android

The pointercancel event in Chrome on Android can be a nuisance, firing unexpectedly and interrupting touch interactions. This article explores solutions to prevent pointercancel without disabling touch scrolling.

Understanding the Issue

Why does pointercancel fire?

• Touch Scrolling: Chrome on Android utilizes touch events for scrolling web pages. When a user scrolls, the browser might cancel ongoing pointer events, triggering pointercancel.
• System Events: System-level interruptions, like incoming notifications or calls, can also interrupt touch events and lead to pointercancel.

Problem with Disabling Touch Scrolling

While disabling touch scrolling prevents pointercancel, it hinders the user experience, making navigation cumbersome. This solution is often undesirable.

Solutions

1. Event Delegation

Delegating event handling to a parent element can prevent pointercancel from firing on child elements.

Code Example

<div id="container">
  <div id="draggable"></div>
</div>

<script>
const container = document.getElementById('container');
const draggable = document.getElementById('draggable');

container.addEventListener('pointerdown', (event) => {
  // Handle pointerdown event
});

container.addEventListener('pointermove', (event) => {
  // Handle pointermove event
});

container.addEventListener('pointerup', (event) => {
  // Handle pointerup event
});

draggable.addEventListener('pointercancel', (event) => {
  // Prevent pointercancel event
  event.stopPropagation();
});
</script>

2. Pointer Events API

The Pointer Events API offers finer control over touch interactions.

Code Example

<script>
const element = document.getElementById('element');

element.addEventListener('pointerdown', (event) => {
  if (event.pointerType === 'touch') {
    event.preventDefault(); // Prevent default touch behavior
  }
});

element.addEventListener('pointermove', (event) => {
  if (event.pointerType === 'touch') {
    // Handle touch move events
  }
});

element.addEventListener('pointerup', (event) => {
  if (event.pointerType === 'touch') {
    // Handle touch up events
  }
});

element.addEventListener('pointercancel', (event) => {
  // Pointer cancel event will not be fired
});
</script>

3. CSS Touch-Action

The touch-action CSS property allows controlling how elements respond to touch events.

Code Example

<style>
#element {
  touch-action: none; // Disable touch scrolling
}
</style>

Comparison

Conclusion

By employing event delegation, the Pointer Events API, or carefully configuring touch-action, you can mitigate the pointercancel event without sacrificing touch scrolling functionality on Chrome Android.