Solution to the conflict between touchstart event and click event in JS

This article mainly introduces to you the solution to the conflict between touchstart event and click event in JS. The solution method is introduced in great detail through sample code, which has certain reference value for everyone's study or work. Friends who need it, please follow the editor to learn together.

Preface

Mobile Internet is the future development trend. Now many domestic Internet giants are fighting for the mobile pie, such as WeChat Alipay and Alipay are currently relatively successful examples, and of course there are various APP and web applications.

The following article mainly introduces the relevant content about the conflict resolution between touchstart event and click event in JS. I won’t say much below, let’s take a look at the detailed introduction.

1·Description of business scenario

When adapting the completed PC site to the mobile terminal, we want The site has a faster response speed on mobile devices to give users a better experience. At this time, we should use a mobile device-specific event system, for example, use the touchstart event instead of the click event.

Why is this effect better? According to the description in the Google developer documentation:

Browsers on mobile devices will delay 300ms when the click event is triggered to ensure that this is a "click" event rather than a "double-click" event.
As for the touchstart event, the bound event will be triggered the moment the user's finger touches the screen. Therefore, the significance of using touchstart to replace the click event is to help users save 300ms on each click. It is very necessary to use this technology in situations where the page frequently requires clicks, or the clicks occur during animations and have high requirements for animation fluency.

But, let’s go back to our initial scenario. When the PC site is adapted to the mobile terminal, we cannot simply replace the touchstart and click events because the PC does not recognize the touchstart event.

2·Causes of conflict

Of course, we can bind touchstart and click to an element at the same time event, but this will lead to the problem solved in this article - the two events will conflict on mobile devices.

Since mobile devices can recognize touchstart and click events at the same time, when the user clicks on the target element, the touchstart event and click event bound to the target element (about 300ms later) will be triggered in sequence, that is to say , the callback function we bound will be executed twice! . This is obviously not the result we want.

##3·Solution

(1) Use preventDefault

const Button = document.getElementById("targetButton")
Button.addEventListener("touchstart", e => {
 e.preventDefault()
 console.log("touchstart event!")
})
 
Button.addEventListener("click", e => {
 e.preventDefault()
 console.log("click event!")
})

Summary

(2) Function-based detection of binding events

const Button = document.getElementById("targetButton")
const clickEvent = (function() {
 if ('ontouchstart' in document.documentElement === true)
 return 'touchstart';
 else
 return 'click';
})();
 
Button.addEventListener(clickEvent, e => {
 console.log("things happened!")
})

Sample code for implementing finger zoom images in WeChat applet

Based on css preloading in vue Detailed explanation of the configuration method using sass

The above is the detailed content of Solution to the conflict between touchstart event and click event in JS. For more information, please follow other related articles on the PHP Chinese website!