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

For this situation, there are the following two solutions:

(1) Use preventDefault

The first solution is to use the preventDefault method in the event object. The function of the preventDefault method is to prevent the occurrence of the element's default event behavior, but it is interesting Yes, when we bind touchstart and click events to the target element at the same time, using this method in the touchstart event callback function can prevent subsequent click events from occurring.

This makes no sense. After all, the click event we added is not the "default event" of the element, but it does work, or in other words, is implemented by the browser, so we can use This method solves the conflict between the touchstart event and the click event on the mobile device. The specific code is as follows:

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!")
})

When you simulate the mobile device on the browser and click the target element, you will only see the touchstart event! field in the console. Obviously, the click event was successfully blocked.

Summary

The advantage of using this method is that it is simple, crude, direct and effective, and can achieve our goals well, but the disadvantage is that the preventDefault method prevents the click event The method is based on the browser implementation, not the preventDefault principle, which will bring some uncertainty, although I have not yet found a specific scenario where this method fails.

(2) Function-based detection of binding events

We can encapsulate the click event of the element by judging whether the browser supports the touchstart event, so that the client will The environment determines the event type that the element should be bound to. The code is as follows:

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!")
})

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Sample code for implementing finger zoom images in WeChat applet

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

##Angular 4.x Ionic3 pitfall Ionic3.x pop reverse value transfer detailed explanation

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!