Of Stack

Three Realization Methods of Click state Processing on Mobile Terminal

  • 2021-07-10 18:40:32
  • OfStack

Preface

When developing mobile pages, in order to improve the user experience, an effect is usually added to the touched elements to give feedback to the user's operation. There are three main ways to realize this kind of feedback. If you need it, let's take a look at it.

1. Pseudo-class: active

The active pseudo-class is often used to style a link when clicked or otherwise activated. Most commonly used at anchor points < a href="#" > In this case, 1 mainstream browsers also support other elements, such as button. In a multi-button mouse system, active is only applicable to the primary key, and most of the current situation is the left key, that is, the primary key.

The CSS style defined by this pseudo-class is only triggered for a short moment between the mouse button being pressed and the mouse button being released. The active state can also be triggered by using the tab key of the keyboard.

It is worth noting that pseudo-classes are a convenient way to implement, but in ios, it is necessary to specify the related elements or body Upper binding touchstart Event to make the element's :active Effective. 


By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the . - MDN

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

It can also be directly in body Add on 


<body touchstart>
 <!-- ... -->
</body>

In addition, due to the delay problem of mobile 300ms, touch feedback will be delayed, which can be solved by Fastclick.

2. webkit-tap-highlight-color

This property is not standard. It is used to set the highlight color of hyperlinks when clicked. It appears as a semi-permeable gray background on ios devices. It can be set -webkit-tap-highlight-color For any color, such as rgba(0,0,0,0.5) If no color is set alpha Value, the default transparency is used, alpha Is 0, highlighting is disabled, alpha Is 1, the element will not be visible when clicked

Most Android devices also support this attribute, but the display effect is different, showing a border. -webkit-tap-highlight-color Is the color of the border

3. touch incident

touch event triggered when the user's finger is placed on the mobile device and slides on the screen. The principle is that touchstart Add to the element when className , touchstend Remove when className 


<!--  Omission  -->
<li data-touch="true">
 Order me 
</li>
<!--  Omission  -->
<script>
 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'){
  //  Cancel when moving out an element active Status 
  if(e.changedTouches[0].pageX<rect.left || e.changedTouches[0].pageX>rect.right || e.changedTouches[0].pageY<rect.top || e.changedTouches[0].pageY>rect.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')
 }
 })
</script>

Summarize

The above is the whole content of this article. I hope the content of this article can bring 1 certain help to everyone's study or work. If you have any questions, you can leave a message for communication.

Related articles: