Mobile-Side interaction optimization

1. The Click event response on the mobile Web page has a 300ms delay

Cause: Web pages that are accessed by mobile devices are pages on your PC. In the default viewport (980px) page, it is often necessary to "double click" or "Pinch open" to enlarge the page. And it's just to confirm that the user is double-clicking or clicking.

Safari needs 300ms of latency to judge. Later, the iphone,android also used this design.

For example: If you click on it, click the second time within 300ms to think of the double-click event.

1.1) How to solve?

Use TAP events instead of click

Customizing the Tap Event Principle:

Record time, finger position at Touchstart, Touchend, compare at Touchend, if the phone is in the same position (or allow a very bears displacement value to be moved) and the time interval is short (generally considered to be 200ms)

Touchmove has not been triggered in the process. You can think of triggering the "click" on the handheld device, which is generally called "tap." (General use of zepto.js frame)

1.2) Problem: Tap "tap" Bug; Description: Click on the top layer of the button, but the button under the mask will also be triggered.

Point through the process: Touchstart, Touchend mask disappears, at this time because 300ms causes the following click Trigger

Solutions for tap penetration:

① uses ease animations to transition 300ms latency.

② The addition of the middle-tier DOM element, allowing the middle to accept this "pierce" event

③ "Up and Down" uses the Tap event to solve the Tap pass event (but inevitably the native tag's Click event)

④ switch to Fastclick's library (the latest zepto has fixed this bug)

2. Tap event is a custom event based on touch base event.

2.1) Touch is the core event of the mobile device's interaction.

Touchstart: Finger touch screen trigger (there is no trigger on the screen with finger on it)

Touchmove: Swipe the finger on the screen to trigger continuously

Touchend: Triggers when the finger leaves the screen

Touchcancel: Trigger when system cancels touch (infrequently used)

2.2) In addition to the common event properties, touch events contain proprietary touch attributes.

Touches: An array of touch objects that track the touching operation.

Targettouches: An array of touch objects for a particular event target;

Changetouches: An array of touch objects that last touched the change

2.3) Each Touch object contains attributes--tracks touch specific locations based on touch objects to determine touch interaction or gesture events

ClientX: Touch the x-coordinate of the target in the viewport, ClientY

PageX: Touch the x-coordinate of the target in the page (including scrolling), Pagey

ScreenX: Touch the x-coordinate of the target in the screen, ScreenY

Target: Touch the DOM node destination

Identifier: Identifies the unique ID of the touch

2.4) Android 4.0,4.1,4.4 only fires once touchstart, once touchmove,touchend does not trigger

Solution: Add in Touchmove: Event.preventdefault ()---------touchmove multiple triggers, touchend end trigger

Cause problem: The default behavior does not occur, such as: scroll, which causes the page not to scroll

2.5) common touch-related interaction effects

① Elastic Scrolling

When a client's page scrolls to the top or bottom, the scrollbar shrinks and lets us slide a certain distance. By buffering the effect of rebound, bring the user a good experience.

However, there are several cases of scrolling:

1. Body Layer scrolling: self-elastic scrolling, Overflow:hidden invalidation, GIF and timer paused

2, Partial scrolling: no elastic scrolling, no rolling inertia, not smooth

How do I turn it on? body {Overflow:scroll;-webkit-overflow-scrolling:touch;}

Note: Android does not support native elastic scrolling, but can be implemented with third-party library Iscroll

② drop-down refresh

③ loading: Using the Scroll event instead of the touch event

Mobile-Side interaction optimization