2

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?

5
  • With such little information ( and no code ) given, the obvious answer is don't prevent it in the first place. Beyond that we have no idea what your use case is for either situation. Provide full details and code
    – charlietfl
    Commented Jan 14, 2015 at 15:14
  • ohh man, my code is so complicated :/ I tried to sum up the problem to see if anyone managed to reattach a scrolling event to the cursor after the cursor had already been pressed. like linking any element scrolling to the cursor. the problem happens on android, when the scrolling event is fired it triggeres a touchcancel, wich will destroy my gesture detection function, because a touchcancel will prevent a touchEnd from triggering, so the solution was to use a preventDefault on touchDown, but then the scrolling events dont get fired :/
    – popo joe
    Commented Jan 14, 2015 at 15:19
  • 1
    break this down to a simple example. You might be able to use conditions to determine whether to prevent default or not. Would help to see why you need to prevent it in the first place
    – charlietfl
    Commented Jan 14, 2015 at 15:23
  • 1
    hey charlie thanks for the quick answer, I actually call preventDefault, because on android when a scrollEvent is triggered, a touchCancel event is also triggered, wich disables my function that checks for gestures. basically you cannot do gesture detection on a scrolling div :/ thats a pain. so in order to prevent the scrolling event from disabling my gesture detecting function Icall preventDefault on touchDown, but if the user makes a gesture and i detect that it corresponds to a scrolling, i want to reattach the scroll to the already pressed down cursor :/
    – popo joe
    Commented Jan 14, 2015 at 15:26
  • suggest you update question with those details. Sounds like a device specific issue. Also provide a demo. Still not very clear what you need
    – charlietfl
    Commented Jan 14, 2015 at 15:48

1 Answer 1

Reset to default
2

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.