How to realize the hit State processing of Mobile Endpoint by css
Editor to share with you css how to achieve mobile endpoint hit state processing, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!
Pseudo-class: active
The active pseudo class is often used to set the style of the next link in the clicked state or other activated state. It is most commonly used for anchors, and other elements such as button are also supported in mainstream browsers. In a multi-button mouse system,: active is only applicable to the main button, which is currently the left button in most cases.
The CSS style defined under this pseudo class is only triggered for a brief moment between pressing the mouse button and releasing the mouse button. The active status can also be triggered using the tab key of the keyboard.
It is worth noting that pseudo-classes are a convenient way to implement, but in ios, you need to bind the touchstart event to the related element or body for the element's: active to take effect.
By default, Safari Mobile does not use the: active state unless there is a touchstart event handler on the relevant element or on the.-MDNdocument.body.addEventListener ('touchstart', function () {})
You can also add it directly on body.
In addition, due to the delay of mobile 300ms, there will be a delay in touch feedback, which can be solved by Fastclick.
II. Webkit-tap-highlight-color
This attribute is not standard and is used to set the highlighted color when the hyperlink is clicked, which appears as a gray background of a semi-transparent film on the ios device. You can set-webkit-tap-highlight-color to any color, such as rgba (0pha0). If the alpha value of the color is not set, the default transparency will be used. When alpha is 0, highlight will be disabled, and the element will not be visible when alpha is 1.
Most Android devices also support this attribute, but the display effect is different, showing as a border, and the value of-webkit-tap-highlight-color is the color of the border.
III. Touch event
The touch event that is triggered when the user puts his finger on the mobile device and slides on the screen. The principle is that when you touchstart, remove className when you add className,touchstend to an element
Click document.body.addEventListener ('touchstart', function (e) {var target = e.target if (target.dataset.touch =' true') {target.classList.add ('active')}}) document.body.addEventListener (' touchmove', function (e) {var target = e.target, rect = target.getBoundingClientRect () if (target.dataset.touch = 'true') {/ / remove the element Cancel active status if (e.changedTouches [0] .pageXroom.right | | e.changedTouches [0] .pageYroom.bottom) {target.classList.remove ('active')}) document.body.addEventListener (' touchcancel', function (e) {var target = e.target if (target.dataset.touch = = 'true') {target.classList.remove (' active')}}) document.body.addEventListener ('touchend') Function (e) {var target = e.target if (target.dataset.touch = 'true') {target.classList.remove (' active')}}) these are all the contents of the article "how to implement the hit state handling of mobile endpoints by css" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
