This is the seventh day of my participation in the First Challenge 2022. For details: First Challenge 2022.

preface

Some time ago, I developed an H5 activity topic page, and one of the requirements in this H5 topic page is to click the button popup box to display the activity details. The need may seem mundane. It contains some knowledge points worth learning. Click through and slide through

What is click through, slide through

Before that, we must first understand the mobile 300ms delay trigger. In order for the browser to double click to zoom, the browser needs to identify whether the user has clicked the screen twice.

Because mobile devices do not have a mouse. So the user’s click events on mobile are split into the following process: TouchStart -> TouchMove -> TouchEnd -> click When the user clicks on the screen, the browser listens for each of these events.

When the touched event is triggered. The browser does a 300ms delay here. This 300ms delay is used to identify whether the user double-clicked the screen.

It is this delay that causes click penetration on the mobile end

Here is an example of clickthrough:

//test.vue
<div v-show="showOverlay" class="overlay" >
  <div class="rule-box">
    <div class="form-box">
      <div class="form-box-title">{{ title }}</div>
      <div class="rules-box" v-html="filterRulesText">
      </div>
    </div>
    <div>
      <img @click="showOverlay =false" class="close-btn" src=".. /images/close.png" alt="">
    </div>
  </div>
</div>
</template>
<script>
export default { 
  name:'test'.props: {
    rulesText: {
      type: String.default: ' '
       },
  data(){
   return {
     title:'View Event Details'
     showOverlay:false}},computed: {
  filterRulesText() {
    const str = this.rulesText
    const newStr = str.replace(/\r\n|\n|\r/g.'<br/>')
    // console.log(newStr)
    return newStr
  },
  methods: {init(){
    this.showOverlay = true}}}</script>
Copy the code
/ / app. Vue
<template>
<div>
<Button @click="$refs.openDialog.init()">Click here for more details</Button>
<Test ref="openDialog"></Test>
</div>
<script>
import Test from '@/components/Test'
export default {
 name:'app'.components:{Test}
}
Copy the code

It looks something like this: When I click on the close image, the entire screen mask and details are hidden on the mobile side, and the component is hidden in the DOM.

The click event that should have been applied in the test component was penetrated into the parent component’s app due to the browser’s 300ms delay.

That’s how clickthrough works. The sliding tradition is the same as clickthrough.

Click through the solution

  • Block browser default eventse.preventDefault()Used in VUE@click.stopComponent default events. But not all browsers support it
  • Disabling browser zooming also solves the 300ms delay problem.
  • Added pop-up transition animation
  • Using fastclick

Slide through solution

When the H5 project has a lot of content, we will add a scroll bar so that the content in the body can be slid.

When the user clicks to view details: If the details are less. So we don’t need to slide the contents of our popbox

When you scroll outside of the box, you’ll notice that the content inside the body slides. This is also due to the 300ms delay. The solution here is simple: we just use the event modifier in vue.

Add @TouchMove.prevent to the mask layer div

<div v-show="showOverlay" class="overlay"  @touchmove.prevent>
Copy the code

When the details page is large. Because there’s so much text we need to use scroll bars. At this point we will add overflow: Scroll to the pop-up details. You will notice that the scroll bar in the popbox is disabled. It doesn’t scroll.

The reason for this is that we used @touchmove.prevent to prevent the body scrollbar event, but that event also applies to the popbox. Therefore, this method is not available.

So what’s the solution? Add a scroll hidden style to the body. Change the body style when the value of showOverlay in vue changes:

// Code ignores...
watch: {showOverlay(val){
     this.styleChange(val)
    }
 
  },
methods: {styleChange(val){
   let body = document.body
  
  // Add overflow to hidden when val is true
  if(val){
      body.style.overflow = 'hidden'
  }else{
    body.style.overflow ='scroll'}}}Copy the code

This will solve the slip penetration problem. Of course, you can also wrap the above code into a custom directive ~~~~~~

The last

If the article has the inadequacy place, also invites everybody to criticize to point out.

Thank you for watching this article hope to give a 👍 comment collection three even! Your likes are my motivation to write.