these class libraries are designed to solve the 300ms delay and the emergence of point-through bug.
when I first transferred to mobile development, I didn"t think too much about it. I found several articles that mentioned these issues. The proposed solutions are generally recommended to use such plug-ins. So I didn"t have the brain to adopt it.
now, looking back, we find that these class libraries themselves have a lot of defects. Multiple distributions, input failure, click failure, and so on, to name a few. The usage of some libraries is even more awkward, such as the way vue-tap, uses instructions- vmurtaps = "{methods:handler}"
;
tap, which mimics zepto, has tried to implement a similar library on its own. The test is not in place, and I also feel that there are a lot of problems. I feel that I have actually come to a dead end.
when I first learned programming, I liked making wheels very much. I like all kinds of tricks and tricks. But gradually, I found that the standard is the real way to solve the problem.
300 milliseconds is a design flaw in the ascendant days of mobile development. In fact, the relevant standards have fixed this problem a long time ago. The way is as follows
1.viewport
<meta name="viewport" content="width=device-width">
When the browser detects this tag, it will think that this is a page that has been well adapted to the mobile side, and double-click zooming will be disabled. There is no click delay problem.
2.touch-action
html {
touch-action: manipulation;
}
this attribute is used to specify how the element responds to touch events.
see MDN
compatibility is good
as for point penetration, this problem can be easily solved as long as the cause is known.
<!-- box -->
<div class="box" ontouchend="this.style.display="none"">
</div>
<a href="http://www.baidu.com">,</a>
the above code will cause you to jump when you click box to hide.
the solution is very simple
<div class="box" ontouchend="setTimeout(()=>{this.style.display="none"})">
</div>
put the hidden operation in an asynchronous callback to ensure that the operation is performed after the element dispatches click to avoid clickthrough.
in fact, this kind of scenario that leads to clickthrough is not common on the page. Introducing some problematic third-party class libraries to solve this problem is really giving up eating for fear of choking.
of course, this is only a personal opinion. It is precisely because I am not sure whether I have taken into account the place, add a small number of groups, and there is no place to ask, so I have come here to collect your views and hope that you will not be stingy with advice. Thank you.