JavaScript common mobile web page effects

1. Touch screen events

1.1 Overview of touch screen events

1. Mobile browsers have better compatibility, so there is no need to consider JS compatibility issues. But the mobile terminal also has its own unique features, such as touch screen eventstouch ( touch events ), both Android and IOS
2. touchThe object represents a touch point, which may be a finger or a touch pen
3. Touch screen events can respond to user finger (or stylus) operations on the screen or touchpad

Common touch screen events:

1.2 Touch Event Object (TouchEvent)

TouchEventIt is an event that describes the state change of the finger on the touch plane (touch screen, touch pad, etc.) . This type of event is used to describe one or more contacts, allowing developers to detect the movement of contacts, the increase and decrease of contacts, and so on.
touchstart, touchmove, touchendThree events will have their own event object.

List of three common objects:

1.3 Drag elements on mobile

1. touchstart, touchmove, touchendYou can drag elements to achieve
2. But dragging the element requires the coordinates of the current finger, you can use targetTouches[0]the pageXandpageY
3. The principle of dragging on the mobile terminal: Calculate the distance moved by the finger during the movement of the finger. Then use the original position of the box + the distance moved by the finger
4. Finger distance traveled: Slide your finger in the position - finger touch beginning position

Three steps of dragging elements:

1. Touch element touchstart: Get the initial coordinates of the finger and the original position of the box
2. Move finger touchmove: Calculate the sliding distance of the finger and move the box
3. Leaving the finger touchend:
   Note: finger movement will also trigger the scrolling of the screen, so prevent the default screen scrollinge.preventDefault();

2. Common special effects on mobile

[Mobile Carousel Picture]