Touchscreen device Touch event experiment and recording

1. Event Overview

Touch-screen devices have four original touch events, "Touchstart" "Touchmove" "Touchend" "touchcancle", here are only the first three, because the last is a passive interrupt when the event pops up.

2. Touchstart

The user puts the finger on the screen for an instant, triggering the event.

3. Touchmove

The user slides on the screen with his finger, which continues to trigger the event.

4. Touchend

The event that is triggered when the user's finger leaves the screen.

5. Overview of properties

Each time the event is triggered, the event will attach some properties, with some additional information. Here the main experiment "touches" "targettouches" "Changedtouches" three properties. These three properties are arrays, which can be seen from the plural form of their names.

6. A definition: Touch

A finger is placed on the screen, defined as a touch. This touch contains the position information of the finger, and so on. In short, a touch can basically be seen as a finger on the screen.

7. Touches array of attributes

When an event is triggered, all "touch" on the screen is placed in the array.

Example: With a finger on the screen, triggering a "Touchstart" event, then when this event triggers, the associated "touches" array has an element, which is the information about your finger.

Example: You have put a finger on the screen, then put a second finger, put the second, the trigger of the "Touchstart" event, the associated "touches" array has two elements, is the information of the two fingers.

8. Targettouches Array of attributes

When an event is triggered, all touch on the screen, the touch that is associated with this event, is placed in the "Targettouches" array with the "touch" in a DOM node. As for DOM node, it means to originate from a DOM node. For example, from a <td></td>, or from a <div></div>.

Example: A table, two TD, that is two columns, you have a finger in the first TD touch, and then put a finger to the second TD , then the second finger caused by the "Touchstart" event, the associated "targettouches" The array has only one element, and that is the "touch" of the second finger.

Example: A table, two TD, that is two columns, you have a finger in the first TD touch, and then put a finger to the first TD , then the second finger caused by the "Touchstart" event, the associated "targettouches" The array has two elements, the "touch" of the first finger and the "touch" of the second finger.

9. Insert: The properties of the touch object

The above-mentioned arrays contain "touch" objects. So what are the properties of the touch object?

"Https://developer.mozilla.org/en-US/docs/Web/API/Touch/target", this link can be viewed in detail.

Here I'm talking about a property that is

[Touch the].target property.

What is this attribute?

It's the first time your finger touches the screen, the DOM node where the finger is, and then no matter how your finger moves, the target property will not change.

10. Changedtouches Array of attributes

An array of "touches" that raise this event when an event is triggered.

Example iphone--1-"Touchstart": Now Test "Touchstart" on the iphone, now with two fingers on the screen, it will cause a few "Touchstart" event? The answer is related to the target of your two "touch" objects. If the "touch" target of these two fingers is the same, then a "Touchstart" event is raised, naturally, the number of elements in the associated "Changedtouches" array is 2.

Example iphone--2-"Touchmove": Now test the "Touchmove" event on the iphone, put two fingers on the screen later, and then swipe at the same time, then the movement of these two fingers will trigger a different "touchmove" event, or will be unified trigger a What about the "Touchmove" incident? The answer is also related to the target of the two "touch" objects. If the "touch" target of the two fingers is the same, then a "Touchmove" event is triggered uniformly, naturally, the element of the associated "Changedtouches" array is 2.

Example iphone--3-"Touchend": Similarly, ibid.

Example android--1-"Touchstart": Now Test "Touchstart" on Android, and now with two fingers on the screen, it will cause a few "Touchstart" event? The answer is, two times. That is to say that the elements of the "changedtouches" array of the two-Times Association are all 1.

Example android--2-"Touchmove": Now test the "Touchmove" event on Android, put two fingers on the screen later, and then slide, then the movement of these two fingers will trigger the different "touchmove" respectively Does the event still trigger a "touchmove" event uniformly? The answer is to be triggered uniformly once. They are not differentiated according to the different target.

Example android--3-"Touchend": it will be triggered individually without a unified trigger.

Touchscreen device Touch event experiment and recording