The difference between mobile touch, click, tap

First, click and tap Comparison

Click and tap will be the starting point of the event, but on the mobile phone web side, click will have 200-300ms delay, so the general use of tap ( tap ) instead of click for clicking Events. Singletap and DOUBLETAP respectively represent clicks and double clicks.

Second, the use of tap will be a point penetration event (event penetration)

Many of the Zepto (mobile-developed libraries) say that using tap can have a point-through event.

1. What is Tap event penetration

After executing the upper bound tap event, the lower layer is triggered by default if the Click event is bound or there is a hit event (a/input) itself, which is the point through event,

2. The cause of the incident

The first thing to know is that the tap event is simulated by listening to the touch event on the document, and the tap event is bubbling onto the document before proceeding;

Touchstart: You can start by touching it with your hands on this DOM.

Click: Touch on the DOM and the finger never moves, and the finger leaves the screen on this DOM, and the touch and leave time is short (some browsers may not detect the time interval, still can go click), only to start triggering.

That is, the events on the mobile side are triggered from morning to night: Touchstart touchstop click. So the click Trigger is delayed, about 300ms, so the Click Trigger principle is that the click is triggered by triggering the element that currently has the click, and the element is facing the user's front end.

3. Solutions

(1) There is a library called Fastclick on GitHub Https://github.com/ftlabs/fastclick

Initialized on the body when the DOM is ready, such as:

$ (function () {    newfastclick (document.body);})

Then bind the Click event to an element that requires "no lag click". In combat development, the click Response is faster than tap.

(2) Bind the Touchend event to the element and add E.preventdefault () internally;

$A. On (' Touchend ', function (e) {/// Touchend is a native event and is captured on the DOM itself to trigger      $demo. Hide ()    E.preventdefault (); })

Listens for touchend events, blocks the default behavior of the A element's touchend, and thus prevents the Click event from being generated.

Third, touch events

Mainly has

Touchstart event: Triggered when the phone touches the screen, even if a finger is already on the screen.

Touchmove event: When the finger is on the screen, the East China legal entity is continuously triggered. During this event, calling the Preventdefault () event can prevent scrolling.

Touchend event: Triggers when the finger is left on the screen.

Touchcancel event: Triggered when the system stops tracking touch. The exact trigger time for this actual.

Each touch event includes three touch lists:

1.touches: A list of all the fingers that are currently on the screen.

2.targetTouches: A list of the fingers that are located on the current DOM element.

3.changedTouches: A list of fingers that involve the current event.

For example, in a Touchend event, this would be a moving finger.

These lists consist of objects that contain touch information:

1.identifier: A numeric value that uniquely identifies the current finger in a touch session (Touchsession).

The 2.target:dom element is the target of the action.

3. Client/page/screen coordinates: The position where the action takes place on the screen.

4. Radius coordinates and RotationAngle: Draw an ellipse roughly equivalent to the shape of a finger.

---------------------------------------------------

The difference between mobile touch, click, tap