What's the difference between touchcancel and touchend events?

Question

After reading this event_touchcancel doc:

The touchcancel event occurs when the touch event gets interrupted.

Different devices will interrupt a touch event at different actions, and it is considered good practice to include this event to clean up code if this "error" should occur.

and w3c event-touchcancel. I am still confused.

What does "when the touch event gets interrupted" means? Is there any specific situation that interrupts the touch event? When will touchcancel event be triggered?

Rainier

I see that this important question has been unanswered for 6 months. Hope someone clarifies the situation. – Excoriate

w3schools is trash. The official spec you've linked to says the event indicates "a touch point has been disrupted in an implementation-specific manner," and even provides examples "such as... the touch point leaving the document window into a non-document area..." That seems pretty clear – Laudation

Answer 1

The touchcancel event occurs when the touch event gets interrupted.

Semantically, it is used to detect when a touchpoint is no longer active.

A touchpoint can be disrupted in a number of different ways, for example:

• If the user's finger is removed from the touch screen on a multitouch active state.
• If the user switches to a different app (abruptly) or if the device loses power.
• If the user's finger moves outside the browser window or the element that they are interacting with, effectively to prevent the user from accidentally interacting with elements outside the intended target.

In all these cases, the touchpoint gets “disrupted” and the touchcancel event should be fired to handle the forthcoming expected behavior.

Behavior in Browsers:

There is a w3c specification on web APIs for touch events, but is completely implementation dependent.

Example implementation being, touchCancel is a child object/class of touchEvent, which is a child object/class of UIEvent and that is handled by WindowsEventDispatcher. Example handling of canceling touch by a gfx callback helper.

Apple, similarly, has touchCancel type property that defines as "A system event canceling the current touches for the control.", and is a child/inherits from UIControl Event structure. But it also has broader type implementation, e.g., For an event where a finger is dragged inside the bounds of the control (touchDragInside). All such types listed here.

Chromium also used touchEvents, e.g., touchCancel, for touch scrolling and gesture handling, but no longer [1] [2] do so in favor of a gesture recognizer [3] in the [code].

I found explicit developer documentation that specify when to trigger touchCancel related events in Apple. They have predefined types and specs on when to use them. MDN has documentation of their type UI event, but not explicit spec on exactly when to use them. I couldn't find Chromium doc/spec of touchEvents, you are welcome to explore the code.

Edit: correctly specified an example + added section.

Kym

The first case (the user's finger is removed from the touch screen) would trigger a touchend event, not touchcancel. This answer might be more useful with documented references to what conditions trigger this event in actual browsers. – Laudation

Yes, touchEnd is more precise than touchCancel in that case. Edited that and added some browsers info. Thanks! – Kym

Answer 2

Say you have a device that can at most cope with four concurrent touches. What happens if the user adds a thumb, meaning a fifth touch has started? It's up to the device whether to ignore the new fifth touch, or to discard one of the previous touches in favour of recording the new one. If a previous ongoing touch is to be jettisoned in favour of the new one, a touchcancel event might be fired by the device. This is distinctly different from a touchend event because it's not caused by the user.

Natashianatassia

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Rainbow