Touch System Events

Touch System Events Overview

Touch events are a series of events on a touchscreen device that occur when a user touches the screen and a series of actions.
Contains Touchstart, Touchmove, touchend events.

Program Ideas

We focus on the abstract object of the event, such as the Touchmove event that occurs when the finger moves over the touchscreen, and we go to find the properties related to this event, depending on the occurrence of the event (for example, Touchstart and Touchend events), To determine if a program triggers a task (for example, you want to animate a page when the user slides up).

Event mode

It should be noted that the touch event is the same as other DOM events (because it is a DOM event, but is only used in the new HTML5 event of the touchscreen device), binds with AddEventListener, and uses E.prevantdefault () in event handling To prevent default event execution (for example, when you scroll a Div, use it to prevent page scrolling), use e.stoppropagation () to prevent events from bubbling up, and so on.

Object interpretation

An array of Touchlist:touch class objects
Touch object: Touch object represents a contact, the contact property contains identifier, Target, Clientx/clienty, Pagex/pagey, Screenx/screeny, Force (minimum ellipse angle of contact surface). RadiusX (minimum ellipse x axis of contact surface)/radiusy (minimum elliptical y-axis of contact surface)/rotationangle (Chrome is still webkitforce (pressure)/webkitradiusx/with WebKit prefix) Webkitradiusy/webkitrotationangle), where identifier is used to identify the contact because there may be multiple contacts on the screen at the same time.

Event resolution Touchstart Event 1, Condition: The Touchstart event occurs when the user touches the screen.

Experiment:

• Touch the screen with one finger:
  A Touchstart event is triggered at this time
• Two Finger touch screen:
  Two Touchstart events occurred successively
  Summary: Touchstart is defined by a touch point (two touch points that should be strictly separated). (On the trigger principle, here is the conjecture, this question has been asked in the knowledge, then updated)

2. Attribute parsing

• Changedtouches Properties:
  An touchlist array that represents the contact that changed when the event occurred, typically the contact itself.
  At this point, say indetifier this property:
  Experiment:
  1, a finger FA trigger Touchstart, the identifier of the object is 0;
  2, put on the finger FB, this time triggered a second Touchstart event, identifier 1;
  3, then put on FC, this time triggered a third Touchstart event, identifier 2;
  4, then put on FD, at this time triggered the fourth Touchstart event, identifier 3;
  5, at this time the FA lifted, put on Fe, at this time triggered the fifth Touchstart event, identifier 0;
  6, at this time the FD lifted, put on FF, at this time triggered the sixth Tounchstart event, identifier 3;
  Summary: The identity automatically fills in a identifier that is 0-based and does not exist, so be aware of this when using Indentifier to identify touch points.
• Touches properties:
  A Touchlist object that contains all the touch objects of the contacts that are currently touching the touch plane, regardless of which element they originated from, and whether or not their state has changed. "Excerpt from https://developer.mozilla.org"
• Targettouches Properties:
  A Touchlist object is a touch object that contains the following contacts: The touch starts at the target element of the current event, and still does not leave the contact point of the touch plane. "From https://developer.mozilla.org"
  Targettouches and touches together to do an experiment:
  1, binding Touchstart events in Div#test;
  2, FA placed in the div#test, triggering a touchstart;
  3, FB placed on the body outside the div#test;
  4, FC trigger a div#test on the touch screen and immediately lifted;
  5, FD triggers a div#test on the Touchstart;
  phenomenon : At this point we observe two FA-triggered Touchstart event objects and FD-triggered Touchstart event objects:
  The touches and Targettouches objects in FA's Touchstart contain only one Touch object, which corresponds to the touch point of the FA.
  The touches and Targettouches objects in FD's Touchstart are the same, and contain two touch objects, respectively, the contact points corresponding to FA and FD.

Touchmove Events

The Touchmove event is triggered when the touch point moves on the touch plane.
Experiment:

• Come up with the touch object again, but then we experiment with the target property of the touch object:
  Simply let FA slide out of the div#test to the body area
  In the process we recorded the Touchmove event, for the sake of simplicity, we looked at the last Touchmove event object, and we found:
  phenomenon : The target of the touch object in Changedtouches at this time is div#test, so the target property refers to the element where the event was triggered;
  Here again we find a phenomenon:
  From the beginning to the end, this series of touchmove events will trigger the Touchmove event callback on Div#test;

• Designed to observe the removal of div#test when the move is in progress. The code is as follows:
  "' JavaScript
  var Test=document.getelementbyid (' Test ');

Window.addeventlistener (' Touchmove ', function (e) {
Console.log (' Move on the window ');
Console.log (e);
},false);

Test.addeventlistener (' Touchmove ', function (e) {
E.preventdefault ();
E.stoppropagation ();
Console.log (' Move on the test ');
Console.log (e);
if (e.changedtouches[0].clienty>420) {
Because the height of the div#test in this test is 400px and the starting point is (0,0)
if (Test.parentnode) {
Test.parentNode.removeChild (test);
Console.log (' remove ')
}
}
},false);
```
We still simply let FA slide out of the div#test to the body area.
phenomenon : On the console you can see:

When Div#test is removed, only the touchmove on Div#test is executed, but no longer bubbles to the window.
Note : Before the Remove prints, the event has bubbled up to window, so a callback for the window's touchend is then executed.

Touchend Events

The Touchend event is triggered when the touch point leaves the screen.
Experiment:

• Left after touch on div#test, no movement of contacts.
  Symptom : Touchend event that triggers div#test

• Slide on the div#test, and the process does not leave the Div#test
  behavior : Touchend events are not triggered

• Slide on the div#test and eventually stop to the body and lift your finger
  behavior : Touchend events are not triggered

From for notes (Wiz)

Touch Events