The reason for the delay

In the early days of Safari browser on iPhone, in order to achieve double click amplification effect, when the user clicks the screen, it will determine whether there is a second click within 300ms (note: 300ms is after touchEnd). If there is a double click, if there is no click, and trigger the click event. This process can be unpacked as: touchStart -> TouchMove -> touchEnd ->click

solution

Touchstart/Touchend is non-delayed and can be used to simulate a quick click. Zepto tap or FastClick.js works the same way, except that the Zepto tap event is always triggered on document touchend.

Delays cause problems and solutions

  • Zepto tap through
    • Symptom: A label in the mask layer is bound to a TAP event, triggering the disappearance of the event mask layer. There is an element bound to the click event below the label. When the upper label is clicked, the click event for the lower element is also triggered.
    • Cause: Wait for 300ms after touchend to see that there is no more action, then click is triggered again. Since the mask layer has disappeared by this time, the target of the current click event is on the underlying element.
    • Solutions:
      • Replace the upper element’s TAP event with a click event (with a 300ms delay).
      • You can make elements fade, like fadeOut in jQuery, and set the duration of the animation to be greater than 300ms, so that when delayed click is triggered, the elements below will not “penetrate”.
      • Using fastclick. Js
  • H5 page click events are slow: use fastclick.js
$(function() {
	FastClick.attach(document.body);
});
Copy the code

Refer to the link