CODEWITHSUNDEEP
jqueryscrolljquery-events
popo joe
popo joe

Reputation: 910

Prevent touchCancel on scrollStart event

On Android, when a scroll event is detected, a touchcancel event is triggered, which prevents the touch up to be triggered after the scroll happens. In order to prevent the touchcancel to be triggered I use a preventDefault on touchStart on a scrolling div. Now the problem is, that I need to have the touchUp and the scrolling happening, in order for my gesture detection function to work, and also the scrolling to work.

Is this doable?

Upvotes: 2

Views: 1135

Answers (1)

andreszs
andreszs

Reputation: 2956

Touchcancel will always be fired unless you prevent default in touchmove, because the browser must take control of the pan and zoom actions almost immediately. Your best bet is to swich to the Pointer Events interface using the touch-action CSS attribute accordingly, this gives you more control since pointermove can avoid pointercancel, depending on your touch-action CSS property applied to the relevant object.

The touchcancel event is fired when a touch point has been disrupted in an implementation-specific manner (for example, too many touch points are created).

When using Pointer events, touch-action: pan-y will allow the browser to perform regular vertical scrolling, and won't fire pointercancel (the touchcancel equivalent) when the gesture is performed vertically. Touch-action: none is the equivalent to calling event.preventDefault() as it will neither scroll nor zoom nor apply any of the default browser actions.

The pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.

Check out this jQuery plugin that handles horizontal swipe events with both Touch and Pointer interfaces and explains the differences between them in more detail.

Upvotes: 2

Related Questions