touches
: A list of all touch points (fingers) on the current screen;
targetTouches
: A list of all touch points (fingers) on the current DOM element;
changedTouches
: A list of touch points (fingers) that involve the current event
Use an example to distinguish between these three properties in a touch event:
- Touch the screen with one finger, triggering the event, at which point the three properties have the same value.
- With the second finger touching the screen, at this point, the touches has two elements, each finger touch point is a value. When two fingers touch the same element, the values of targettouches and touches are the same, otherwise targettouches has only one value. Changedtouches this time there is only one value for the second finger of the touch point.
- Touch the screen with two fingers at the same time, the changedtouches has two values, each finger touch point has a value
- Three values change when you swipe your finger
- One finger leaves the screen, and the corresponding elements in touches and targettouches are removed at the same time, and the changedtouches still has elements.
- After your fingers have left the screen, there will be no more values in touches and targettouches, Changedtouches will also have a value that is the contact point of the last finger that left the screen.
The difference between touch-related variables touches,targettouches and changedtouches in
JS