css mobile terminal: implementation of acitve effect_html/css_WEB-ITnose

I have been working on mobile front-end for some time, but there has always been a problem that has not been solved, which is the :hover effect like the PC version. :hover is a selection of elements on which the mouse pointer floats. However, because there is no mouse on the mobile terminal and is replaced by a touch screen, users do not have "elements with the mouse pointer floating on them", and there are very few. Therefore, the selector should be replaced by: active. However, through practice, I found that the situation is not very ideal. It is sometimes triggered on the QQ browser, but it is not triggered at all. It has no effect at all on the browser that comes with my mx3.

Recently when I was looking at the h5 page of Meituan, I found that they have done a good job with this effect (to be honest here, Meituan.com has done a really good job in h5). After reading their code, I found that They also use :active to achieve this effect, but they have an extra line of js code,

document.body.addEventListener('touchstart', function () { });

In fact, this line of code does nothing, it just binds a touchstart event, and then nothing happened.

I tried it myself and found that it works, and the effect is really good. Praise Meituan.

ps: On the mobile side, the browser will have a built-in click highlighting effect. You can add

-webkit-tap-highlight-color:transparent;

to the a tag or body or html Either way.