Solutions to solve the problem of touchstart event penetration on mobile terminals

[Source]: When developing mobile websites, we often wander between click and touchstart; although touchstart is easy to use and responds quickly, its shortcomings are also obvious. When we use touchstart on a large scale, You will encounter that it will be triggered frequently when scrolling the page, resulting in an unfriendly experience; therefore, you cannot say which one is good or bad individually, but you should make use of its strengths and avoid its shortcomings;

Moreover, For the a tag, the jumping method on the mobile terminal is equivalent to click (after my own actual experience)

[Problem] When we trigger touchstart on the upper layer, the click or a tag on the lower layer will be triggered at the same time (strictly It is triggered after 350ms)

[Principle] It is because the trigger time of click is 500ms, and the trigger time of touchstart is 350ms. Because 500>350, the user has a penetration problem

[Solution] There are many ways to solve the problem. If you change the angle and the method, you will have different answers. Here are a few methods that I have found effective in practice, for reference only:

1. You can replace touchstart with touchend, because it takes 200ms to trigger touchend, so you can solve the problem of triggering time (this is also what I often use to deal with click problems)

2. Everyone also You can cover a transparent layer below the trigger, allowing it to penetrate into this transparent layer instead of the layer with events (this method increases the level and the complexity of coding)

The above is the detailed content of Solutions to solve the problem of touchstart event penetration on mobile terminals. For more information, please follow other related articles on the PHP Chinese website!